写在前面
说起来css动画是一个很尬的事，一方面因为公司用css动画比较少，另一方面大部分开发者习惯了用JavaScript来做动画，所以就导致了许多
程序员比较排斥来学习css动画（至少我是），但是一个不懂css动画的前端工程师不能称之为掌握css3，其实当你真正学习css动画之后，你会被它的魅力所吸引的，它可以减少代码量、提高性能。
值此1024程序员佳节之际，我特此推出供同学们学习的动画小案例，这个案例非常简单，但是他可有帮我们巩固上一篇学的animation，并且能够让你对后面要学习的animation有一个基本的认识。
话不多说，跟我开始吧。
1024动画案例
这就是我们最终要实现的效果，还是比较简单的，拿来当做一个入门动画的小案例再好不过了。
搭建静态页
<style>
.outBox ul{ display: flex; } .outBox li{ list-style: none; margin: 20px; font-size: 120px; position: relative; top: 0px; color:#fff; } </style> <body> <div class="outBox"> <ul> <li>1</li> <li>0</li> <li>2</li> <li>4</li> </ul> </div> </body>写完之后你就会在屏幕上得到1024四个大字，因为我们要做凭空出现的跳跃效果，所以我们把它的颜色设置为了白色。
制作简单动画
.outBox li:nth-child(1){
animation: myMove 1.5s ease alternate infinite ; } .outBox li:nth-child(2){ animation: myMove 1.5s ease 0.5s alternate infinite ; } .outBox li:nth-child(3){ animation: myMove 1.5s ease 1s alternate infinite ; } .outBox li:nth-child(4){ animation: myMove 1.5s ease 1.5s alternate infinite ; } @keyframes myMove{ 0%{ color: rgb(229, 255, 80); top: 160px; } 50%{ color:rgb(2, 150, 200); top: 0px; } 100%{ color: rgb(255, 106, 198); top: 160px; } }加入这些代码，就会使每个数字都产生上下的动画了，然后每个数字依次跳出来展示，并在其中变换颜色。由于都是上一个文章的内容，在这里我就不再赘述了。
最终效果
@keyframes myMove{
0%{
color: rgb(229, 255, 80);
top: 160px; transform: rotateY(0deg) scale(1.0); } 50%{ color:rgb(2, 150, 200); top: 0px; transform: rotateY(180deg) scale(1.5); } 100%{ color: rgb(255, 106, 198); top: 160px; transform: rotateY(0deg) scale(1.0); } }然后再在每个状态里加入
transform: rotateY(xxdeg) scale(1.0);就可以实现文章开始的图片效果了。
这里我们接触到了transform属性，也就是变形属性，其中rotateY(0deg)的意思是以Y轴为对称轴进行旋转，括号中间的内容是旋转角度。中scale(1.0)是操作放大缩小用的，括号中的内容负责大小。放到案例中的意思就是开始默认大小、默认角度，运行到中间文字左右对称翻转并且变大，再到运行结束改变成初始阶段。
结论
看完这篇文章你会发现实现一个动画其实很简单，尤其是在你学会了animation之后，上道了学习transform自然简单。translate（移动）以及transform（变形）其实并不是制作动画的，只是变形和移动在动画中经常会使用到，而且人们经常把这几个属性搞混，所以我拿他们一起来进行了讲解。这个案例只是响应1024推出的练习案例，希望和我一起在学习css动画的同学可以独自写一写代码，相信你们一定能够对动画有自己的理解的，同时对接下来的学习也会起到很大的帮助。
