【CSS3】CSS3 动画 ③ ( 动画属性 | CSS3 常见动画属性简介 | 动画属性简写方式 | 动画属性简写语法 | 代码示例 )

素颜马尾好姑娘i 2023-10-14 16:24 143阅读 0赞

#### 文章目录 ####

*  一、CSS3 动画属性
 *   *  1、CSS3 常见动画属性简介
     *  2、代码示例 - CSS3 常见动画属性使用
 *  二、CSS3 动画属性简写方式
 *   *  1、CSS3 动画属性简写语法
     *  2、animation 简写动画属性提示
     *  3、动画属性简写形式与原形式对比
     *  4、代码示例 - CSS3 动画属性简写示例

## 一、CSS3 动画属性 ##

--------------------

### 1、CSS3 常见动画属性简介 ###

CSS3 中动画使用 @keyframes 关键字 定义 动画 ;

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

在 @keyframes 定义的动画中 , 可以设置一系列的 CSS 属性 , 用于控制动画的运行 , 常见的属性如下 : **( 下面的动画属性是设置在 执行动画 的 标签元素 样式中的 )**

*  **animation-name 属性 :** 设置在 @keyframes 定义动画时的 动画名称 , 一般在调用动画的 标签元素 中使用 , 用于定义动画执行哪些关键帧 , 该属性是调用动画必须要设置的 ;

div {
        
                /* 设置动画名称 之前使用 @keyframes 定义的 element-move 动画 */
                animation-name: element-move;
            }

*  **animation-duration 属性 :** 设置 CSS3 动画的持续时间 , 默认为 0 ;
    
     *  单位可以是 秒 s ;
     *  单位也可以是 毫秒 ms ;

div {
        
                /* 设置动画执行时间 2 秒 */
                animation-duration: 2s;
            }

*  **animation-timing-function 属性 :** 设置动画的 " 时间函数 " , 该函数体现了动画的速度变化曲线 ; 常见的值有
    
     *  linear 线性
     *  ease 缓入缓出
     *  ease-in 缓入
     *  ease-out 缓出

div {
        
                /* 设置动画运动曲线 ease 缓入缓出 */
                animation-timing-function: ease;
            }

*  **animation-delay 属性 :** 设置动画的延迟时间 , 延迟指定的时间后 , 再执行动画 ;
    
     *  单位可以是 秒 s ;
     *  单位也可以是 毫秒 ms ;

div {
        
                /* 设置动画开始时间 1 秒后开始 */
                animation-delay: 1s;
            }

*  **animation-iteration-count 属性 :** 设置 CSS3 动画 执行的 重复次数 ;
    
     *  可设置具体的次数 , 如 : 2 , 100 ;
     *  如果设置 无限次 , 可设置 infinite 属性值 ;

div {
        
                /* 设置动画执行次数 无限循环播放 */
                animation-iteration-count: infinite;
            }

*  **animation-direction 属性 :** 设置 动画的 播放方向 ; 常见的值如下 :
    
     *  normal 正常播放
     *  reverse 反向播放
     *  alternate 交替播放

div {
        
                /* 设置动画播放方向 交替播放 一次正向一次反向 */
                animation-direction: alternate;
            }

*  **animation-fill-mode 属性 :** 设置 动画 播放后 的状态 ; 常见的值如下 :
    
     *  none 不改变元素样式
     *  forwards 保持动画结束时的样式
     *  backwards 保持动画开始时的样式 , 回到起始点 ;

div {
        
                /* 设置动画执行完毕后的状态 回到起始状态 */
                animation-fill-mode: backwards;
            }

*  **animation-play-state 属性 :** 设置 动画 播放状态 , 常见的值如下 :
    
     *  running 运行中
     *  paused 暂停

div {
        
                /* 设置动画当前的播放状态 运行状态 */
                animation-play-state: running;
            }

### 2、代码示例 - CSS3 常见动画属性使用 ###

**代码示例 :**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>CSS3 动画属性</title>
        <style>
            @keyframes element-move {
          
                0% {
          
                    transform: translateX(500px);
                }
                100% {
          
                    transform: translateX(0);
                }
            }
            
            div {
          
                width: 100px;
                height: 100px;
                background-color: pink;
                /* 设置动画名称 之前使用 @keyframes 定义的 element-move 动画 */
                animation-name: element-move;
                /* 设置动画执行时间 2 秒 */
                animation-duration: 2s;
                /* 设置动画运动曲线 ease 缓入缓出 */
                animation-timing-function: ease;
                /* 设置动画开始时间 1 秒后开始 */
                animation-delay: 1s;
                /* 设置动画执行次数 无限循环播放 */
                animation-iteration-count: infinite;
                /* 设置动画播放方向 交替播放 一次正向一次反向 */
                animation-direction: alternate;
                /* 设置动画执行完毕后的状态 回到起始状态 */
                animation-fill-mode: backwards;
                /* 设置动画当前的播放状态 运行状态 */
                animation-play-state: running;
            }
        </style>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>

**执行效果 :** 网页运行后 , 下面的小方块 无限循环 左右 往复运动 ;

![在这里插入图片描述][2450caf3b2234442b4f7bc2f69c21aff.png]

## 二、CSS3 动画属性简写方式 ##

--------------------

### 1、CSS3 动画属性简写语法 ###

**CSS3 动画属性简写 语法 :**

animation: 动画名称 持续时间 运动曲线 开始时间 播放次数 播放方向 结束状态;
    animation: name duration timing-function delay iteration-count direction fill-mode;

上述简写的各个属性之间 , 使用空格隔开 ;

动画属性中 , 除了 animation-play-state 属性之外 , 其它动画属性都可以简写到 animation 属性中 ;

animation-play-state 属性 控制 动画开始暂停 , 一般需要根据代码逻辑单独控制 ;

**animation 简写属性 中各属性对应关系 :**

*  **动画名称 :** animation-name , @keyframes 动画的名称 ;
 *  **持续时间 :** animation-duration , 动画运行一个周期所花费的时间 , 单位 秒 / 毫秒 ;
 *  **运动曲线 :** animation-timing-function , 动画运行曲线 , 默认 ease 缓入缓出 ;
 *  **开始时间 :** animation-delay , 动画开始运行的时间 , 单位 秒 / 毫秒 ;
 *  **播放次数 :** animation-iteration-count , 动画播放次数 , 默认 1 , 无限循环播放 infinite ;
 *  **播放方向 :** animation-direction , 动画播放方向 , 正 / 反 / 交替 ;
 *  **结束状态 :** animation-fill-mode , 动画运行开始结束后的状态 ;

### 2、animation 简写动画属性提示 ###

在编写 animation 简写动画属性时 , 如果没有记住顺序 , 可以在 输入 anim 之后 , 发现下面的提示 ,

![在这里插入图片描述][05b5913c233a4450ae1c872eba667149.png]  
然后在第一个提示位置 , 敲回车 , 即可生成如下代码 :

animation: name duration timing-function delay iteration-count direction fill-mode;

![在这里插入图片描述][d55d87b02bd046a68e1ae5d8c315974b.png]  
然后根据上述代码提示 , 填充每个 动画属性值 ;

### 3、动画属性简写形式与原形式对比 ###

**原来设置动画属性需要的代码 :**

/* 设置动画名称 之前使用 @keyframes 定义的 element-move 动画 */
                animation-name: element-move;
                /* 设置动画执行时间 2 秒 */
                animation-duration: 2s;
                /* 设置动画运动曲线 ease 缓入缓出 */
                animation-timing-function: ease;
                /* 设置动画开始时间 1 秒后开始 */
                animation-delay: 1s;
                /* 设置动画执行次数 无限循环播放 */
                animation-iteration-count: infinite;
                /* 设置动画播放方向 交替播放 一次正向一次反向 */
                animation-direction: alternate;
                /* 设置动画执行完毕后的状态 回到起始状态 */
                animation-fill-mode: backwards;

**使用动画的简写形式 , 只需一行代码即可实现 :**

/* 使用简写形式设置动画属性 */
                animation: element-move 2s ease 1s infinite alternate backwards;

### 4、代码示例 - CSS3 动画属性简写示例 ###

**代码示例 :**

**执行结果 :** 在网页中的小方块左右往复运动 ;

![在这里插入图片描述][b46cdbea01a249368f6315d71edee88d.png]

[2450caf3b2234442b4f7bc2f69c21aff.png]: https://img-blog.csdnimg.cn/2450caf3b2234442b4f7bc2f69c21aff.png
[05b5913c233a4450ae1c872eba667149.png]: https://img-blog.csdnimg.cn/05b5913c233a4450ae1c872eba667149.png
[d55d87b02bd046a68e1ae5d8c315974b.png]: https://img-blog.csdnimg.cn/d55d87b02bd046a68e1ae5d8c315974b.png
[b46cdbea01a249368f6315d71edee88d.png]: https://img-blog.csdnimg.cn/b46cdbea01a249368f6315d71edee88d.png