CSS3 | 动画的基本使用+动画常用属性+动画简写属性+速度曲线细节

目录

动画

动画的基本使用

动画常用属性

 动画简写属性

速度曲线细节

---

动画

动画的基本使用

制作动画分为两步：

1. 先定义动画
2. 再使用（调用）动画

1.用keyframes定义动画（类似定义类选择器）

• 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
• 在 @keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
• 请用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%
• 百分比就是划分的时间

2.使用动画

        /* 1.定义动画 */
        @keyframes move {

            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }

            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2.调用动画 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }

动画常用属性

 animation-iteration-count：infinite；    无限循环播放

animation-direction：altermate；下一周期逆向播放

 动画简写属性

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态；

            animation: move 3s linear 0s infinite alternate forwards;

• 简写属性里面不包含 animation-play-state （规定动画运行还是暂停）
• 暂停动画 animation-play-state：paused；经常和鼠标经过等其他配合使用
• 想要动画走回来，而不是跳回来：animation-direction：alternate；（逆向播放）
• 盒子动画结束后，停在结束位置：animation-fill-mode：forwards；
• 可以添加多个动画，中间用逗号隔开，例如：animation：bear 1s，mountain 4s；

速度曲线细节

animation-timing-function：规定动画的速度曲线，默认是“ease”

 steps（） 分几步完成动画，曲线只写一个就行