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

1.动画介绍

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

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

CSS中动画类型：

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

区分几个概念：

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

参考文章：https://juejin.im/post/5b137e6e51882513ac201dfb#heading-0

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

还可以参考一篇文章：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

动画调试方法：
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()这个值实现。

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

在这里插入图片描述

原图是这样（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等

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

猜你喜欢