两种CSS动画

CSS 动画就是由一种状态（CSS样式），过渡到另一中状态（CSS样式）的（动态）过程，CSS中提供了两种动画实现方式：transition、animation。

transition过渡动画

transition动画

transition 过渡动画是针对CSS样式的变化，进行过渡，如width、opacity、color，可以实现CSS样式的平滑动态过渡动画效果。

transition 动画本身并不会主动执行，须通过其他方式触发。如常用一些伪类触发：:hover、:focus、:active（鼠标按下激活）、:target（锚点元素id）、:checked，或者JS控制CSS样式来触发动画执行。

:::danger 🔸简写属性：transiton: property duration timing-function delay ::: 当transition-property指定的属性值变化时，就会触发动画执行，设置all则任意属性变化都会触发动画执行。如下示例：

• 页面初始加载时并不会触发动画执行。
• 当鼠标移入时，属性width、background-color值变化，触发了动画执行。
• 当鼠移出时，属性width、background-color值回到初始状态，再次触发了动画执行。

<div>
    <button onclick="active()">动起来</button>    
    <p class="goodstudy">好好学习</p>
</div>
<style>
        .goodstudy {
                background-color: #63a9e7;
                width: 150px;
                margin: 40px 0;
                padding: 8px;
                /* 设置动画 页面加载并不会执行 */
                transition-property: width,background-color;
                transition-duration: 1s;
                transition-delay: 0.2s;
                transition-timing-function: ease-out;
                transition: all 1s ease-out; 
        }
        .goodstudy:hover {
                width: 350px;
                background-color: red;
        }
        .active {
            transform: rotate(360deg);
            background-color: #0cdb39;
            transition: all 3s;
    }
</style>
<script>
        //通过脚本添加CSS类，触发动画执行
        const pnode = document.querySelector('.goodstudy');
        function active() {
                pnode.classList.add('active');
                //执行完移除，没有事件只能定时执行移除动作
                setTimeout(() => {
                        console.log('removed');
                        pnode.classList.remove('active');
                }, 3000);
        }
</script>

transform变换

transform 可实现元素的各种图形变换，如缩放、旋转，及3D的变换。transform 本身并不是动画，不过常用来配合transition来实现各种炫酷的变换动画效果。（transform /trænsˈfɔːrm/ 变换）

3D坐标系的手势图：

    <div>
        <button onclick="active()">动起来</button>
        <p class="goodstudy">好好学习</p>
        <p class="ddup">天天向上</p>
    </div>
    <style>
        .ddup{
            background-color: #0cdb39;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            transition: all 1s ease-out;
            transform: skew(-30deg);   
        }
        .ddup:hover{
            transform: translateX(-30px);   /* transform只有一个生效，被后面的覆盖了*/
            transform: rotateX(180deg);     /* 围绕x轴3d旋转*/
        }
    </style>

animation帧动画

CSS 动画 animation 帧动画，动画的实际样式是由 @keyframes 规则实现。

:::danger 🔸简写属性：animation: name duration timing-function delay iteration-count direction fill-mode play-state :::

<div class="div-abox">
        断肠人在天涯
</div>
<style>
        .div-abox {
                padding: 4px;
                width: 150px;
                background-color: red;
                animation-delay: 1s;
                animation-duration: 1s;
                animation-name: box-line-ani;
                animation-direction: alternate;            /*动画交替反向运行*/
                animation-iteration-count: infinite;       /*无限重复*/
                animation-fill-mode: both;
                animation-timing-function: cubic-bezier(.4, .52, .93, .4);
                /*animation 简写属性*/
                animation: box-line-ani 1.5s alternate 4 cubic-bezier(.4, .52, .93, .4) both;
        }
        .div-abox:hover {   /* 鼠标悬浮时运动加速 */
                animation-duration: 0.5s;
        }
        @keyframes box-line-ani {
                0% {
                        background-color: white;
                        width: 150px;
                }
                40% { width: 250px; }
                100% {
                        background-color: #63a9e7;
                        width: 400px;
                }
        }
</style>

@keyframes

animation 属性定义动画各项运动参数，实际的动画变换的CSS属性通过@keyframes来定义，使用@keyframes建立两个或两个以上关键帧来实现动画帧的样式定义。 :::warning @keyframes animationname {keyframes-selector {css-styles;}} :::

• 定一个关键帧动画组，并命名：@keyframes animation-name {}
• 用百分比%来定一个动画帧：from{}
  • 0%表示开始第一帧样式，可以用别名from代替。
  • 100%表示最后一帧样式，可以用别名to代替。
  • 中间可以加其他%* 关键帧。

• 每一帧里可以定义任何CSS样式。

  @keyframes animation-name {
        0% {
                background-color: white;
                width: 150px;
        }
        40% { width: 250px; }
        100% {
                background-color: #63a9e7;
                width: 400px;
        }
  }

  animation-timing-function动画速度

  animation-timing-function 用来定义动画执行过程的缓动速度，内置了几个常用的函数定义，及两个关键函数。

• 三次贝塞尔曲线缓动函数：cubic-bezier(x1, y1, x2, y2)，参数其实是两个坐标点，可以通过在线贝塞尔可视化工具查看。用来实现动画过程中速度变化曲线的控制，以实现更炫酷、自然的动画效果。内置的linear、ease等都是基于贝塞尔曲线函数的。

• 步骤缓动函数：steps()，把@keyframes定义的动画帧划分为多段执行，多用来实现图片的逐帧动画效果。 | animation-timing-function值 | 描述 | 示例/补充 | | —- | —- | —- | | cubic-bezier(x1, y1, x2, y2) | 三次贝塞尔曲线函数，参数为两个坐标点，在线工具 | cubic-bezier(x1, y1, x2, y2) | | linear | 匀速，= cubic-bezier(0.0, 0.0, 1.0, 1.0) | animation-timing-function: linear; | | ease | 默认值：低速开始，中间加速，然后低速收尾 | （ease /iːz/ 容易，减轻） | | ease-in | 低速开始 | | | ease-out | 低速结束 | | | ease-in-out | 低速开始，低速结束 | | | steps( n, ) | 分阶段缓动函数，参数为步数和变化点 | animation-timing-function:steps(6); |

动画事件

用于监听动画的开始、循环、结束的动画事件 AnimationEvent：

<script>
        const node = document.querySelector('.div-abox');
        node.addEventListener('animationend', (e) => {
                console.log(e.animationName, e.type, e.elapsedTime);
                //box-line-ani animationend 1
        })
</script>

参考资料

• 入浅出 CSS 动画
• CSS3 3D transform变换