css3——transition动画过渡（transition动画过渡可作用的属性），animation动画铺垫和@keyframes动画关键帧

女爷i 2022-05-09 02:24 431阅读 0赞

**css3动画优点：开启GPU加速，不会产生动画队列，即频繁点击按钮时，不会有多个动画在等待执行；**

**1. transition: *property* *duration* *timing-function* *delay*;**

是个复合属性，包括：

[transition-property][]：设置过渡效果的 CSS 属性，值：all 所有变化的属性都过渡；某个css属性或某些css属性，用逗号隔开属性

[transition-duration][]：设置完成过渡效果需要的时间，值：数字，单位：秒或毫秒

[transition-timing-function][]：设置速度效果的速度曲线

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>linear</td> 
   <td>匀速开始至结束（等于 cubic-bezier(0,0,1,1)）。</td> 
  </tr> 
  <tr> 
   <td>ease</td> 
   <td>慢速开始，然后变快，然后慢速结束（cubic-bezier(0.25,0.1,0.25,1)）。</td> 
  </tr> 
  <tr> 
   <td>ease-in</td> 
   <td>慢速开始（等于 cubic-bezier(0.42,0,1,1)）。</td> 
  </tr> 
  <tr> 
   <td>ease-out</td> 
   <td>慢速结束（等于 cubic-bezier(0,0,0.58,1)）。</td> 
  </tr> 
  <tr> 
   <td>ease-in-out</td> 
   <td>慢速开始和结束（等于 cubic-bezier(0.42,0,0.58,1)）。</td> 
  </tr> 
  <tr> 
   <td>cubic-bezier(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>)</td> 
   <td>在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。</td> 
  </tr> 
 </tbody> 
</table>

[transition-delay][]：设置过渡效果延迟多久后开始，单位：秒或毫秒

理解：transition作用的属性，当其属性值发生变化，比如：hover时；js点击后值的改变等等，凡是属性值发生变化，均会触发transition过渡属性的过渡效果。

**transition 动画过渡可作用的属性：**

<table> 
 <tbody> 
  <tr> 
   <td style="width:133px;">background-color</td> 
   <td style="width:146px;">background-position</td> 
   <td style="width:144px;">border-bottom-color</td> 
   <td style="width:150px;">border-bottom-width</td> 
   <td style="width:127px;">border-left-color</td> 
   <td style="width:149px;">border-left-width</td> 
  </tr> 
  <tr> 
   <td style="width:133px;">border-right-color</td> 
   <td style="width:146px;">border-right-width</td> 
   <td style="width:144px;">border-spacing</td> 
   <td style="width:150px;">border-top-color</td> 
   <td style="width:127px;">border-top-width</td> 
   <td style="width:149px;">bottom</td> 
  </tr> 
  <tr> 
   <td style="width:133px;">clip</td> 
   <td style="width:146px;">color</td> 
   <td style="width:144px;">font-size</td> 
   <td style="width:150px;">font-weight</td> 
   <td style="width:127px;">height</td> 
   <td style="width:149px;">left</td> 
  </tr> 
  <tr> 
   <td style="width:133px;">letter-spacing</td> 
   <td style="width:146px;">line-height</td> 
   <td style="width:144px;">margin-bottom</td> 
   <td style="width:150px;">margin-left</td> 
   <td style="width:127px;">margin-right</td> 
   <td style="width:149px;">margin-top</td> 
  </tr> 
  <tr> 
   <td style="width:133px;">max-height</td> 
   <td style="width:146px;">max-width</td> 
   <td style="width:144px;">min-height</td> 
   <td style="width:150px;">min-width</td> 
   <td style="width:127px;">opacity</td> 
   <td style="width:149px;">outline-color</td> 
  </tr> 
  <tr> 
   <td style="width:133px;">outline-width</td> 
   <td style="width:146px;">padding-bottom</td> 
   <td style="width:144px;">padding-left</td> 
   <td style="width:150px;">padding-right</td> 
   <td style="width:127px;">padding-top</td> 
   <td style="width:149px;">right</td> 
  </tr> 
  <tr> 
   <td style="width:133px;">text-indent</td> 
   <td style="width:146px;">text-shadow</td> 
   <td style="width:144px;">vertical-align</td> 
   <td style="width:150px;">visibility</td> 
   <td style="width:127px;">width</td> 
   <td style="width:149px;">word-spacing</td> 
  </tr> 
  <tr> 
   <td style="width:133px;">z-index</td> 
   <td style="width:146px;">等等等</td> 
   <td style="width:144px;">&nbsp;</td> 
   <td style="width:150px;">&nbsp;</td> 
   <td style="width:127px;">&nbsp;</td> 
   <td style="width:149px;">&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

**2. animation动画铺垫和@keyframes动画关键帧**

animation属性：**复合属性**。会按照@keyframes动画关键帧里面指定的帧状态而过渡执行

<table style="width:552px;"> 
 <tbody> 
  <tr> 
   <td style="width:185px;">属性</td> 
   <td style="width:366px;">属性值</td> 
  </tr> 
  <tr> 
   <td style="width:185px;">animation-name</td> 
   <td style="width:366px;">@keyframes的名字</td> 
  </tr> 
  <tr> 
   <td style="width:185px;"> <p>animation-duration</p> </td> 
   <td style="width:366px;">动画过渡时间</td> 
  </tr> 
  <tr> 
   <td style="width:185px;">animation-timing-function</td> 
   <td style="width:366px;">动画过渡函数</td> 
  </tr> 
  <tr> 
   <td style="width:185px;">animation-delay</td> 
   <td style="width:366px;">动画过渡延迟时间</td> 
  </tr> 
  <tr> 
   <td style="width:185px;">animation-direction</td> 
   <td style="width:366px;">动画过渡方向</td> 
  </tr> 
  <tr> 
   <td style="width:185px;">animation-iteration-count</td> 
   <td style="width:366px;">动画过渡次数 infinite（无限次） | number（次数）</td> 
  </tr> 
  <tr> 
   <td style="width:185px;"> <p>animation-fill-mode</p> <p>&nbsp;</p> <p>&nbsp;animation-play-state</p> </td> 
   <td style="width:366px;"> <p>动画开始前和结束后的操作</p> <p>&nbsp;</p> <p>动画播放状态，running（播放） | paused（暂停）</p> </td> 
  </tr> 
 </tbody> 
</table>

用法：

@keyframes + 关键帧名字 ：规定开始、中间过程、结束时的属性状态；

选择器中调用animation属性，animation属性设置：某个关键帧名字 、过渡时间、过渡函数、运动次数、运动方向

**（1）@keyframes + 关键帧 第一种写法：from 和 to**

** 背景颜色：动画起始值：red；动画终止值：blue；当整个animation结束后，背景颜色为green；**

**如果不设置form，那么动画起始值为green，动画终止值：blue；当整个animation结束后，背景颜色为green**

**注意：如果不设置背景颜色，那么在动画结束后，背景颜色为空白。**

**（2）@keyframes + 关键帧 第二种写法：百分比**

注意：0% 和 100% 分别对应 form和to；百分比对应的是时间

比如：

结果：背景颜色：动画起始值：red，中途变向yellow，动画终止值blue；动画结束后，背景颜色：green；

注意：如果不设置背景颜色，动画结束后的背景颜色为空白；

动画次数：n 播放次数、infinite无限次

动画方向：normal默认值正常播放、reverse 反向播放、 alternate 动画在奇数次（1 3 5...）正向播放，在偶数次反向播放、

alternate-reverse 动画在偶数次（2 4 6...）正向播放，在奇数次反向播放。

**（3）播放和停止：**

属性：animation-play-state: running（播放） | paused（暂停）

动画的播放和停止需要结合js来控制animation-play-state属性，进而控制动画的播放和暂停

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .demo{
                position: absolute;
                top: 100px;
                left: 100px;
                width: 100px;
                height: 100px;
                background: green;
                animation: move 3s linear 10 reverse;
            }
            @keyframes move{
                0%{
                    background: red;
                }
                50%{
                    background: yellow;
                }
                100%{
                    background: blue;
                }
            }
        </style>
    </head>
    <body>
        <div class="demo"></div>
        <button id="btn">播放/暂停</button>
        <script>
            var oDiv = document.getElementsByClassName('demo')[0];
         var flag = true;
         btn.onclick = function(){
             if(flag){
                 flag = false;
                 oDiv.style.animationPlayState = 'paused';
             }else {
                 flag = true;
                 oDiv.style.animationPlayState = 'running';
             }
         }
        </script>
    </body>
    </html>

![70][]

注意：播放或暂停，会使整个动画过程暂停在某一时间点 或 在该时间点上继续播放

**（4）关键帧的起始位置和终止位置**

animation-fill-mode：属性定义动画在开始之前和结束之后发生的操作，主要有四个值：

none：默认值，在动画结束后，属性值会回到原来设置的值，如果原来没有设置该值，那么该值为空。

forwards：动画结束后，属性值会变成关键帧的最后一帧

backwards：在动画关键帧的第一帧，延迟等待，再进行动画过渡（运动）；正常情况下，物体在原始位置延迟等待后，再进行动画过渡。

both：动画过渡同时具有forwards和backwards效果

**比如：animation: move 3s linear infinite reverse forwards running;**

[transition-property]: http://www.w3school.com.cn/cssref/pr_transition-property.asp
[transition-duration]: http://www.w3school.com.cn/cssref/pr_transition-duration.asp
[transition-timing-function]: http://www.w3school.com.cn/cssref/pr_transition-timing-function.asp
[transition-delay]: http://www.w3school.com.cn/cssref/pr_transition-delay.asp
[70]: /images/20220509/e11d8124a27e4f1db30b59a33171fd5b.png