css3-animation用法简记
来源:互联网 发布:ggplot 和 python 编辑:程序博客网 时间:2024/05/21 14:54
css3实现动画三种方式:Transform 、Transition 、Animation
Transform:只关于形变,位置变。
Transition:只关于变的过程,包括元素,时间、方式
Animation:是Transform 、Transition的结合。
animation语法:
name : 动画名称
duration:
是动画持续时间
取值,如:5s
timing-function:
动画变换速率
取值:ease;ease-in;ease-in-out;linear;cubic-bezier
delay:
动画执行延迟时间
取值,如:5s
iteration-count:
动画播放次数
取值:infinite(无限次),n(n次)
direction :
动画播放方向
取值:normal(正向播放)、alternate(正反反正)、reverse(反向播放)、alternate-reverse(反正正反)
fill-mode :
动画结束时停止状态
取值:none(没有执行动画前的状态)、forward(最后一帧)、backward(第一帧)、both(根据animation-direction轮执行forwards和backwards)
play-state:
动画播放状态
取值: running(播放状态)、paused(暂停状态)
Transform:只关于形变,位置变。
Transition:只关于变的过程,包括元素,时间、方式
Animation:是Transform 、Transition的结合。
animation使用方式:如下
关键帧:
@keyframes name{0%{transform:translateY(0);}30%{transform:translateY(-10px);}50%{transform:translateY(-15px);}60%{transform:translateY(0);}80%{transform:translateY(5px);}100%{transform:translateY(15px);}}
animation语法:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
name : 动画名称
duration:
是动画持续时间
取值,如:5s
timing-function:
动画变换速率
取值:ease;ease-in;ease-in-out;linear;cubic-bezier
delay:
动画执行延迟时间
取值,如:5s
iteration-count:
动画播放次数
取值:infinite(无限次),n(n次)
direction :
动画播放方向
取值:normal(正向播放)、alternate(正反反正)、reverse(反向播放)、alternate-reverse(反正正反)
fill-mode :
动画结束时停止状态
取值:none(没有执行动画前的状态)、forward(最后一帧)、backward(第一帧)、both(根据animation-direction轮执行forwards和backwards)
play-state:
动画播放状态
取值: running(播放状态)、paused(暂停状态)
做个笔记供随时查询,如有不妥之处,欢迎指点哟。
阅读全文
0 0
- css3-animation用法简记
- CSS3动画属性animation的基本用法
- CSS3 动画属性 animation 的基本用法
- CSS3 动画属性 animation 的基本用法
- CSS3 animation
- CSS3 Animation
- CSS3 Animation
- CSS3 Animation
- CSS3 Animation
- CSS3 Animation
- css3 animation
- [CSS3] Animation
- CSS3 Animation
- CSS3 animation
- CSS3 Animation
- css3 animation
- css3 animation
- CSS3 Animation
- Selenium使用CSS定位常见语法及实例
- 图像分割“Fully Convolutional Instance-aware Semantic Segmentation”
- Android应用开发-数据存储和界面展现
- ScrollWebView的滑动距离显示内容
- CXF WebService 服务端开发
- css3-animation用法简记
- 新零售如何发力?还得靠零售BI来驱动
- bzoj刷题
- FCC-----------Mutations
- iOS GCD中级篇
- 2. Add Two Numbers
- java 通过链表实现栈
- 初次使用easyui。。。
- Jlink使用故障记录