慕课网CSS工作应用+面试（5)CSS动画

电玩女神 2022-02-28 02:03 269阅读 0赞

**1.动画介绍**

动画的原理：视觉暂留作用、画面逐渐变化

动画的作用：愉悦感、引起注意、操作的反馈、掩饰加载过程

CSS中动画类型：

1.transition补间动画（有开始有结尾，中间补出来）  
2.keyframe关键帧动画（也是补间动画，但是可以有多个关键帧，也就是中间多了些帧）  
3.逐帧动画

区分几个概念：

animation（动画） ~关键帧，往复性。  
transition（过渡）~ 属性，触发动作，一过性。  
transform（变换）~ 复杂的变换参数。  
translate（移动）~translate只是transform的一个属性值，即移动。

参考文章：[https://juejin.im/post/5b137e6e51882513ac201dfb\#heading-0][https_juejin.im_post_5b137e6e51882513ac201dfb_heading-0]

可以使用animate.css中CSS动画效果库。

还可以参考一篇文章：[https://www.cnblogs.com/Fengzp/p/5548493.html][https_www.cnblogs.com_Fengzp_p_5548493.html]

**2.transition动画**

补间动画中间过程：  
位置-平移（left/right/margin/transform）  
方位-旋转（transform）  
大小-缩放（transform）  
透明度（opacity）  
其他-线性变换（transform）

.container{
        width: 100px;
        height: 100px;
        background: red;
        transition: all 1s;
        /* transition-timing-function: ease-in-out; */
        transition-timing-function: cubic-bezier(0.465, -0.460, 0.525, 1.435);
        /* transition-delay: 1s; */
    }
    .container:hover{
        width: 800px;
        background:green;
    }
    
    <div class="container">
    </div>

我们先看一个简单的transition示例：

//将鼠标悬停在一个div元素上，逐步改变表格的宽度从100px到300px：
    div
    {
    width:100px;
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
    }
    div:hover {width:300px;}

transition属性：

transition: property duration timing-function delay;

property:指定CSS属性的name(比如width、background等等)，transition效果  
duration:transition效果需要指定多少秒或毫秒才能完成  
timing-function:指定transition效果的转速曲线  
delay:定义transition效果开始的时候

关于timing-function属性有：linear、ease、ease-in、ease-in-out、cubic-bezier(n,n,n,n)  
cubic-bezier也是规定速度曲线一种。  
更多timing-function效果可以看（还可以自定制效果）：[https://matthewlein.com/tools/ceaser][https_matthewlein.com_tools_ceaser]

动画调试方法：  
F12调试面板之后，按ESC键进入animation面板进行调试。

**3.keyframe动画**

关键帧动画相当于多个补间动画  
与元素状态的变化无关  
定义更加灵活

.container{
        width: 100px;
        height: 100px;
        background: red;
        animation: run 1s linear;
        /* animation-direction: reverse; */
        /* animation-fill-mode: forwards; */
        animation-iteration-count: infinite;
        /* animation-play-state: paused; */
    }
    @keyframes run{
        0%{
            width: 100px;
        }
        50%{
            width: 800px;
        }
        100%{
            width: 100px;
        }
    }
    
    <div class="container">
    </div>

animation属性是一个简写属性，用于设置六个动画属性：  
1.animation-name  
2.animation-duration  
3.animation-timing-function  
4.animation-delay  
5.animation-iteration-count（规定动画应该播放的次数。）  
6.animation-direction（规定是否应该轮流反向播放动画。）

animation-iteration-count：n|infinite；  
n：定义动画播放次数的数值  
infinite：规定动画应该无限次播放

animation-direction：normal|alternate；  
normal：默认值。动画应该正常播放  
alternate：动画应该轮流反向播放

**4.逐帧动画**

逐帧动画是关键帧动画的一种特殊用法，也是多个帧，但是没有补间。

适用于无法补间计算的动画。

使用steps()这个值实现。

逐帧动画适用于动画时长比较短、图片不是很大的场景。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

原图是这样（400X200），通过雪碧图原理+逐帧动画，让他动起来。

steps(n,start/end) 第一个参数 number 为指定的间隔数，即把动画/关键帧之间分为 n 步阶段性展示，第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。

steps(1)效果拿下面举例，0%到12.5%时候是不动的，也就是steps(1)中1让他1步执行，保持在`background-position: 0 0;`位置，以下类似。

.container{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        background: url(./animal.png) no-repeat;
        animation: run 1s infinite;
        animation-timing-function: steps(1);
    }
    @keyframes run{
        0%{
            background-position: 0 0;
        }
        12.5%{
            background-position: -100px 0;
        }
        25%{
            background-position: -200px 0;
        }
        37.5%{
            background-position: -300px 0;
        }
        50%{
            background-position: 0 -100px;
        }
        62.5%{
            background-position: -100px -100px;
        }
        75%{
            background-position: -200px -100px;
        }
        87.5%{
            background-position: -300px -100px;
        }
        100%{
            background-position: 0 0;
        }
    }
    
    <div class="container">
    </div>

**5.CSS面试真题**

1.CSS动画的实现方式有几种？

1.transition补间动画/过渡动画（有开始有结尾，中间补出来）  
2.keyframe关键帧动画（也是补间动画，但是可以有多个关键帧，也就是中间多了些帧）  
3.逐帧动画

2.过渡动画和关键帧动画的区别

过渡动画需要有状态变化  
关键帧动画不需要状态变化  
关键帧动画能控制更精细

3.如何实现逐帧动画

使用关键帧动画  
去掉补间（steps）

4.相对JS动画，CSS动画的性能

性能不坏  
部分情况下优于JS  
但JS可以做到更好  
部分高危属性，如box-shadow等

[https_juejin.im_post_5b137e6e51882513ac201dfb_heading-0]: https://juejin.im/post/5b137e6e51882513ac201dfb#heading-0
[https_www.cnblogs.com_Fengzp_p_5548493.html]: https://www.cnblogs.com/Fengzp/p/5548493.html
[https_matthewlein.com_tools_ceaser]: https://matthewlein.com/tools/ceaser
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220228/b4038db0514144ce8d00a0d72d049a75.png