一、CSS3 动画简介

" 动画 " 是 CSS3 相较于 CSS 的颠覆性特性之一 ;

在 CSS3 中 , 可以设置多个动画节点 , 精确地控制一个动画或若干动画 , 实现复杂的动效 ;

动画可以实现 :

过渡效果
更多变化
更多控制
自动播放

等效果 ;

二、CSS3 动画实现步骤

CSS3 动画实现步骤 :

首先 , 使用 @keyframes 定义动画 , 后面的 element-move 是动画的自定义名称 ;

@keyframes element-move {  
  0% { transform: translateX(500px); }  
  100% { transform: translateX(0); }  
}

然后 , 通过动画的自定义名称 , 调用已定义的动画 ;

.anim-element {  
  animation-name: element-move;  
  animation-duration: 1s;  
}

上述 .anim-element 选择器选中的标签元素 , 会执行名称为 " element-move " 的动画 , 该动画将会在 1 秒内把将标签元素从右边 500px 位置移动到左边 0px 位置 ;

三、动画定义

动画定义语法 : @keyframes 动画名称 中定义的是 CSS 样式 , 可以定义一个由当前初始状态样式逐渐变为终止状态样式的动画效果 ;

@keyframes 动画名称 {  
  0% { 动画初始状态 }  
  100% { 动画终止状态 }  
}

使用百分比可以定义动画样式变化的发生时间 , 也可以使用 from 和 to 关键字 ;

动画序列规则 :

0% 是动画的开始状态 ;
100% 是动画的终止状态 ;

动画样式个数和执行次数 :

动画是令标签元素由一种样式状态逐渐变为另外一种样式状态的效果 ;
动画的初始状态和终止状态的样式个数是任意多个 ;
动画的执行次数是任意多次 ;

四、代码示例

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义动画</title>
    <style>
        div {
            /* 设置动画的主要作用元素 */
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 设置动画相关样式 */
            animation-name: element-move;
            animation-duration: 1s;
        }
        
        @keyframes element-move {
            /* 定义动画 */
            0% {
                transform: translateX(500px);
            }
            100% {
                transform: translateX(0);
            }
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

</html>