Css3动画 animation 属性介绍以及使用
作者:鹏仔先生日期:2020-06-02浏览:261分类:CSS
语法:
animation: 动画名称 动画执行一次所需时间 动画延迟执行时间 动画播放次数 动画执行状态 动画播放后的状态;
eg:
animation: box_ani 10s 2s infinite paused forwards;
1. 动画名称( animation-name )
eg:
animation: person 1s;
注: 此处的动画名称要与动画关键帧定义的动画名称一致
2. 动画执行一次所需时间( animation-duration )
取值:
正数: 单位为s,设置为0时表示动画不执行
3. 动画延迟执行时间( animation-delay )
取值:
0: 不延迟
正数: 按照延迟的时间执行动画
负数: 设置时间前的动画被截断
4. 动画播放次数( animation-iteration-count )
取值:
number: 正整数值
infinite: 循环播放
5. 设置对象动画的状态( animation-play-state )
取值:
running: 默认值,运动
paused: 暂停
6. 设置对象动画的类型( animation-timing-function )
取值:
ease: 默认值
linear: 匀速运动
ease-out: 减速运动
ease-in-out: 慢-快-慢
step-start: 马上转跳到动画的结束状态或从一帧到下一帧没有过渡
step-end: 保持动画的开始状态,直到动画执行结束,马上转跳到动画结束状态
steps(n,start | end) n表示动画执行需要分几个阶段
7. 设置对象动画运动的方向( animation-direction )
取值:
normal: 正常方向运动
reverse: 动画反方向运行,始终与normal方向相反
alternate: 正反方向交替运动,奇数次正方向,偶数次反方向
alternate-reverse: 奇数次反方向,偶数次正方向
8. 设置对象动画时间之外的状态( animation-fill-mode )
取值:
none: 默认值,不设置动画时间之外的状态
forwards: 保持动画结束时的状态
backwards: 保持动画开始时的状态
both: 遵循 forwards 和 backwards 两个规则
动画关键帧
语法:
@keyframes 动画名称{ 0%{ 属性: 属性值; } ... 100%{ 属性: 属性值; } }
上方代码等同于下方
@keyframes 动画名称{ from{ 属性: 属性值; } ... to{ 属性: 属性值; } }
鹏仔小扩展: 隐藏变形元素的背面,语法如下:
backface-visibility: hidden;
猜你还喜欢
- 02-25 JS判断某个时间戳是否为当天时间
- 02-07 vue使用viewerjs实现图片点击放大
- 02-05 vue实现点击刷新页面 H5实现刷新页面
- 02-04 H5移动端项目实现手写签名功能 vue实现手写签名
- 02-04 vue移动端使用Vconsole Vconsole使用
- 02-04 vue中如何点击返回上一页,vue判断没有上页返回首页
- 11-25 小程序中 时间戳转日期格式(年月日时分秒)封装使用
- 11-25 小程序中button的边框无法去除 button边框如何去除
- 11-19 微信小程序 接口请求封裝
- 11-06 VUE中实现输入框禁止输入小数方法分享
- 10-29 vue表单验证 input输入框禁止输入空格
- 10-27 iView 日期时间选择器设置开始时间至结束时间限制
暂无评论,来添加一个吧。