动画
目录
可以通过设置多个节点来精准控制一个或一组动画,常用来实现复杂的动画效果。
与过渡的区别
动画可以实现更多的变化,更多的控制,连续自动播放等效果。比过渡更加强大
动画分为两步
- 制作动画
- 调用动画
1.定义动画
使用 @keyframes 来定义,使用动画序列,
- 0%是动画的开始,100%是动画的完成,这样的规则是动画序列
- 在 @keyframes 中规定某项css样式,就能创建由当前样式逐渐改为新样式的动画效果
- 动画是使元素从一个样式逐渐变化为另一种样式的效果。可以改变任意多的次数。
- 可以做多个状态的变化keyframe 关键帧
- 里面的百分比要是整数,是总时间的划分
- 用百分比来规定变化发生的时间,或使用关键词“from”和“to”,等同于0%和100%。
例
@keyframes 动画名词 {
0% {
width: 100px;
}
50% {
width: 300px;
}
100% {
width: 200px;
}
}
2.调用动画
在相应元素的样式表下添加
/* 调用动画 */
animation-name: 调用动画名称;
/* 持续时间 */
animation-duration: 持续时间(s);
所有属性
属性 | 描述 |
@keyframes | 规定动画 |
animation | 简写属性 |
animation-name | 调用时规定@keyframes动画的名称(必须) |
animation-duration | 规定动画完成一个周期的时间秒或毫秒,默认为0(必须写) |
animation-timing-function | 规定动画的速度曲线 |
animation-delay | 规定动画从何时开始,默认为0 |
animation-iteration-count | 规定动画的播放次数,默认为1,也可以是infinite(无限循环) |
animation-direction | 规定动画是否在下一周期逆向播放,默认为“normal”,“alternate(逆播放,让动画走回来,而不是直接跳回来)” |
animation-play-state | 规定动画是否正在运行或暂停,默认为“running”,还有paused(暂停),常常与鼠标经过等其他配合使用。 |
animation-fill-mode | 规定动画结束后状态,保持forwards(停在结束位置),回到起点backwards(默认) |
利用animation简写
animation: name duration timing-function delay iteration-count direction fill-mode;
以1.动画名称(必须) 2.持续时间(必须) 3.运动曲线 4.播放次序 5.播放次数 6.是否反方向 7.动画起始或结束的状态 的顺序来写
/* 调用动画 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
相当于
animation: move 2s linear 2s infinite alternate forwards;
简写多个动画之间用逗号隔开
animation-timing-function的属性值
值 | 描述 |
linear | 匀速 |
ease | 默认的,慢快慢 |
ease-in | 低速开始 |
ease-out | 低速结束 |
ease-in-out | 低速开始和结束 |
step(步长) | 指定了时间函数中的间隔数量(步长),跳着走 |