写 CSS3 动画时需要注意的几个点和几个动效 Demo

最近项目中需要做一组宣传的页面，这几个页面上全都是静态图片再加上各种动画，为了做出符合预期效果的页面，我也是恶补了一下 CSS3 动画相关的知识，最后做出来的效果也是达到了设计师的要求。

动画相关知识

如果以前没有接触过或者写过 CSS 动画，有些动画相关的知识还是需要学一下的，这里我并不会讲这些基础知识。这些资料网上有很多，也都写的很好，这里我贴出一些写的不错的分享出来。

CSS3 动画基础

CSS3的动画属性
如何画一个体验更好的动画？
2019年了，你还不会CSS动画？
CSS 怎样写一个动画（从基础动画到3d动画)

CSS3 动画进阶

css3 animation 属性众妙
css3系列之transform 详解rotate
好吧，CSS3 3D transform变换，不过如此！

CSS3 动画库

可能是最全的前端动效库汇总

写动画时的几个需要注意的点

animation-fill-mode 有时候非常重要

在一些非常简单的动画中，可能根本不会用到这个属性，从而会将它忽略。但其实它是一个非常有用的属性，有些动画要达到效果还必须要靠它才行。它有四个值，分别为：

• none：默认值，回到动画没开始时的状态。
• forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
• backwards：在 animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
• both: 根据animation-direction轮流应用forwards和backwards规则。

这里面重点关注两个值，一个是 forwards，另外一个就是 both。
在没有使用 animation-fill-mode 属性之前，我们会发现动画完成后元素又回到了动画开始前的状态，如果先让元素保持在动画完成后的状态，animation-fill-mode: forwards 可以解决这个问题。
那么 animation-fill-mode: both 是怎么用的呢，它的应用场景是这样的，比如说有一个元素要做渐显动画，在动画开始之前它是隐藏的，动画完成后完全显示，这时候 animation-fill-mode: both 就派上用场了，如果不用这个属性，你会发现元素是先完全显示，然后是渐显，然后又再次显示出来，这显然不是我们想要的。与之类似的动画还有元素的位移动画等，

使用 animate.css 的元素如何在动画开始之前完全隐藏

这个是我在使用 animate.css 的时候碰到的，当使用某些 animate 的动画效果时，如 slideInLeft 等时，有时候会发现元素在动画开始之前没有完全隐藏，还能看到一部分，这样会显得非常怪异。
我的做法就是在这个元素外面包一层 div，给这个 div 一个渐显的动画，在 animate.css 的动画开始之前完全即可，这样就可以解决这个尴尬的问题。

两个动画效果

文字以打字的效果出现

打字效果其实就是让文字从左到右一个一个的出现，这个效果其实就是让元素宽度从 0 到 100% 就行了，当然并不是单纯变化宽度就够了，还需要辅以其它的一些属性，其中最重要的就是 animation-timing-function: steps()，这个 steps 里面可以传入参数，它可以控制整个动画过程分为几步，也就是动画一共会有几帧。
关于 steps 有一篇更好的文章 CSS3 animation属性中的steps功能符深入介绍，看完文章基本就能理解这个 steps 是个什么东西以及怎么用了。
除了上面说的以外，我们还需要给元素设置两个属性，分别为 overflow: hidden; 和 white-space: nowrap; 将这几个属性结合起来就可以达到我们想要的打字效果了。

	   .text {
          width: 670px;
          color: #5FD2FF;
          font-size: 32px;
          line-height: 48px;
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
        }
        .text1{
          animation: ani-text-type .5s .5s steps(16, end) both;
        }
        @keyframes ani-text-type {
      		0% {
        		width: 0;
      		}
      		100% {
        		width: 100%;
      		}
    }

旋转底座效果

看上面的图，设计师要求做一个旋转的底座效果，看起来有点像是 3d 的，其实我们用一张平面图给它做动画就可以达到上图中的效果。
要想做到底座旋转的效果，需要用到 rotate 属性，文章开头的动画进阶部分有相关的文章专门讲这个，我这里就直接放出代码了

	.img-disk {
        width: 750px;
        height: 750px;
        margin-bottom: -360px;
        animation: ani-disk 7s linear infinite;
        @keyframes ani-disk {
          from {
            transform: rotateX(78deg) rotateZ(0deg)
          }
          to {
            transform: rotateX(78deg) rotateZ(360deg)
          }
        }
      }

其实原理也很简单，先将平面图用 rotateX 放倒，然后围绕 Z 轴不停的旋转即可。

总结

作为前端来说，动画效果还是很重要的，一个页面有没有动画，给人的感觉差距是很大的，所以用 css 动画还是很有必要熟练掌握的。