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;