面试官：CSS3常见动画有哪些？实现方式？

Dear 丶 2023-01-12 15:56 168阅读 0赞

![5c807a8ffc0cb9bf2ef754504cdfdfaa.png][]

## 一、是什么 ##

CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块

即指元素从一种样式逐渐过渡为另一种样式的过程

常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合

`css`实现动画的方式，有如下几种：

*  transition 实现渐变动画
 *  transform 转变动画
 *  animation 实现自定义动画

## 二、实现方式 ##

### transition 实现渐变动画 ###

`transition`的属性如下：

*  property:填写需要变化的css属性
 *  duration:完成过渡效果需要的时间单位(s或者ms)
 *  timing-function:完成效果的速度曲线
 *  delay: 动画效果的延迟触发时间

其中`timing-function`的值有如下：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <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(n,n,n,n)</td> 
   <td>在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值</td> 
  </tr> 
 </tbody> 
</table>

注意：并不是所有的属性都能使用过渡的，如`display:none<->display:block`

举个例子，实现鼠标移动上去发生变化动画效果

### transform 转变动画 ###

包含四个常用的功能：

*  translate：位移
 *  scale：缩放
 *  rotate：旋转
 *  skew：倾斜

一般配合`transition`过度使用

注意的是，`transform`不支持`inline`元素，使用前把它变成`block`

举个例子

可以看到盒子发生了旋转，倾斜，平移，放大

### animation 实现自定义动画 ###

`animation`是由 8 个属性的简写，分别如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
   <th>属性值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>animation-duration</td> 
   <td>指定动画完成一个周期所需要时间，单位秒（s）或毫秒（ms），默认是 0</td> 
   <td><br></td> 
  </tr> 
  <tr> 
   <td>animation-timing-function</td> 
   <td>指定动画计时函数，即动画的速度曲线，默认是 "ease"</td> 
   <td>linear、ease、ease-in、ease-out、ease-in-out</td> 
  </tr> 
  <tr> 
   <td>animation-delay</td> 
   <td>指定动画延迟时间，即动画何时开始，默认是 0</td> 
   <td><br></td> 
  </tr> 
  <tr> 
   <td>animation-iteration-count</td> 
   <td>指定动画播放的次数，默认是 1</td> 
   <td><br></td> 
  </tr> 
  <tr> 
   <td>animation-direction 指定动画播放的方向</td> 
   <td>默认是 normal</td> 
   <td>normal、reverse、alternate、alternate-reverse</td> 
  </tr> 
  <tr> 
   <td>animation-fill-mode</td> 
   <td>指定动画填充模式。默认是 none</td> 
   <td>forwards、backwards、both</td> 
  </tr> 
  <tr> 
   <td>animation-play-state</td> 
   <td>指定动画播放状态，正在运行或暂停。默认是 running</td> 
   <td>running、pauser</td> 
  </tr> 
  <tr> 
   <td>animation-name</td> 
   <td>指定 @keyframes 动画的名称</td> 
   <td><br></td> 
  </tr> 
 </tbody> 
</table>

`CSS` 动画只需要定义一些关键的帧，而其余的帧，浏览器会根据计时函数插值计算出来，

通过 `@keyframes` 来定义关键帧

因此，如果我们想要让元素旋转一圈，只需要定义开始和结束两帧即可：

@keyframes rotate{
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }
    }

`from` 表示最开始的那一帧，`to` 表示结束时的那一帧

也可以使用百分比刻画生命周期

@keyframes rotate{
        0%{
            transform: rotate(0deg);
        }
        50%{
            transform: rotate(180deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }

定义好了关键帧后，下来就可以直接用它了：

animation: rotate 2s;

## 三、总结 ##

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>transition（过度）</td> 
   <td>用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同</td> 
  </tr> 
  <tr> 
   <td>transform（变形）</td> 
   <td>用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”</td> 
  </tr> 
  <tr> 
   <td>translate（移动）</td> 
   <td>只是transform的一个属性值，即移动</td> 
  </tr> 
  <tr> 
   <td>animation（动画）</td> 
   <td>用于设置动画属性，他是一个简写的属性，包含6个属性</td> 
  </tr> 
 </tbody> 
</table>

## 参考文献 ##

*  https://segmentfault.com/a/1190000022540857
 *  https://zh.m.wikipedia.org/wiki/CSS%E5%8A%A8%E7%94%BB
 *  https://vue3js.cn/interview

\--The End--

系列正在更新：12/20

点击下方卡片解锁更多

![d0650625afb97b346c5fb50242b8c4f5.png][]

创作不易，星标、点赞、在看 三连支持

[5c807a8ffc0cb9bf2ef754504cdfdfaa.png]: /images/20221022/cf35464fafd94e6f99fa1118fe6440d2.png
[d0650625afb97b346c5fb50242b8c4f5.png]: /images/20221022/47364979f4d64657994d0fa7b602f51d.png