CSS制作动画常用技巧有哪些

动画效果点击此处查看https://codepen.io/wjq990112/pen/MWwrXWo

实现这个效果只需要将容器设置为overflow: hidden;，然后对容器内的tab侦听transform属性，使用transform: translateX()使其在 X轴方向移动，大功告成了。

还有一些旋转效果也可以使用transform: rotateZ();使其在浏览器平面上旋转实现，默认是以几何中心为中心点进行旋转。

animation & keyframes

animation属性的用法和transition比较相似，接下来由我来详细介绍一下。

animation CSS 属性是 animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

先做个简单的旋转效果体验一下：

html代码

  
    
    
    
    
  
  
    

      
旋转
    
  

动画效果点击此处查看https://codepen.io/wjq990112/pen/mdJXeqm

这是一个基础的旋转动画，用到了animation和keyframes两个常用于制作动画的 CSS 属性。

animation

现在我们来讲一下基础用法：

css代码

animation: animation-name | animation-duration | animation-timing-function |
  animation-delay | animation-iteration-count | animation-direction |
  animation-fill-mode | animation-play-state;

这样讲肯定还是不懂，继续一条一条拆解开给大家讲解：

css代码

animation-name: rotate; /* 自定义 keyframes 名 */
animation-duration: 10s; /* 设定单次过渡动画时长 */
animation-timing-function: linear; /* 设定单次过渡动画效果 */
animation-delay: 0s; /* 设定单次过渡动画延迟时间 */
animation-iteration-count: infinite; /* 设定过渡动画执行次数 infinite 表示无限循环 */
animation-direction: normal; /* 设定过渡动画方向 可对奇数偶数次动画分别设定 */
animation-fill-mode: none; /* 设定过渡动画的填充模式 */
animation-play-state: running; /* 设定过渡动画运行或停止 */

相信大部分属性都很好理解，只有两个属性可能会比较难理解。

animation-direction和animation-fill-mode应该可以说是最难理解的两个属性了，我们再详细讲解一下：

css代码

/*
 *	normal: 按照 keyframes 设定的动画方向运行
 *	reverse: 按照 keyframes 设定的动画方向的反方向运行
 *	alternate: 先按照 keyframes 设定的动画方向运行 运行结束后再反方向运行
 *	alternate-reverse: 先按照 keyframes 设定的动画方向的反方向运行 运行结束后再正向运行
 */
animation-direction: normal | reverse | alternate | alternate-reverse;
/*
 *	none: 不设定填充模式 默认在动画开始及结束时都停留在动画未开始的状态
 *	forwards: 动画结束后停留在动画的最后一帧
 *	backwards: 动画开始前停留在动画的第一帧
 *	both: 动画开始前和动画结束后分别停留在动画的第一帧和最后一帧
 */
animation-fill-mode: none | forwards | backwards | both;

这两个属性可以说是最难理解的，如果想看设定之后的效果，可以转战MDN。

keyframes

这个CSS属性，相信学过一些简单的动画制作的同学肯定了解，很简单，就是关键帧。

为一个动画设定关键帧，CSS将自动填充他的运动路径。

css代码

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(359deg);
  }
}

上面这段代码，就是为设定了animation属性的div标签创建了两个关键帧，一个是动画起始位置的样式，另一个是动画结束位置的样式，CSS将自动填充动画的过程（即旋转 359 度）。

不仅仅可以设置开始和结束的位置（0%可以使用from关键字代替，100%可以使用to关键字代替），还可以在动画的运行过程中插入关键帧，例如33%，50%，66%等等，CSS会按照关键帧的样式，对动画进行自动填充。

通常情况下，keyframes会与animation配合使用。

讲完了animation和keyframes的用法，我们来看一道面试题，来自本人 2020 年某跳动实习生招聘一面：

请你使用 CSS 实现一个方块来回移动，无限循环。

这个题目其实有 2 种做法，但是原理都是一样的，这里就不放 HTML 代码了，直接放 CSS 的部分：

/*
 *	①
 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}
.move {
  width: 100px;
  height: 50px;
  background: yellow;
  animation: move 1s linear infinite;
}
/*
 *  ②
 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}
.move {
  width: 100px;
  height: 50px;
  background: yellow;
  animation: move 0.5s linear infinite alternate;
}

以上是“CSS制作动画常用技巧有哪些”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！