05.css提高-css动画

文章目录

一. 实现动画效果🈶️两个步骤

1. 创建一个动画 ，from和to等同于0%和100%

2. 调用动画

二. 动画相关属性

三. animation-timing-function

---

animation 动画 可以通过css来实现元素的动画效果

一. 实现动画效果🈶️两个步骤

1. 创建一个动画 ，from和to等同于0%和100%

@keyframes name {

0%{},

100%{}

}

2. 调用动画

animation-name: name; //创建的动画名字

animation-duration: 时间; // 动画的播放时间

---

二. 动画相关属性

1、@keyframes 定义动画

2、animation-name //定义动画名字

3、animation-duration //动画持续时间 默认是0

4、animation-timing-function //动画的速度曲线 默认是ease

5、animation-dealy //动画延迟播放时间

6、animation-decoration//规定动画是否在下一周期逆向播放，默认是normal；alternate是逆向播放

7、animation-interation-count //动画播放次数，默认是1，永久播放infinite

8、animation-fill-mode //规定动画结束后的状态。保持forwards 回到起始是backwards

9、animation-play-state //规定动画是否正在运行或暂停，默认是running，而paused是暂停

---

 三. animation-timing-function

规定动画的速度曲线，默认是ease，以下为其他属性值：

1、linear  // 匀速

2、ease   //默认，低速开始，然后加速，结束前变慢

3、ease-in   //低速开始

4、ease-out   //低速结束

5、ease-in-out  //低速开始、低速结束

6、steps()      //指定时间函数中的间隔数量（步长）