共计 1988 个字符，预计需要花费 5 分钟才能阅读完成。

马上就 2020 年了，不知道小伙伴们今年学习了 css3 动画了吗？

说起来 css 动画是一个很尬的事，一方面因为公司用 css 动画比较少，另一方面大部分开发者习惯了用 JavaScript 来做动画，所以就导致了许多程序员比较排斥来学习 css 动画（至少我是），但是一个不懂 css 动画的前端工程师不能称之为掌握 css3，其实当你真正学习 css 动画之后，你会被它的魅力所吸引的，它可以减少代码量、提高性能。

值此 1024 程序员佳节 之际，我特此推出供同学们学习的动画小案例，这个案例非常简单，但是他可有帮我们巩固上一篇学的 animation，并且能够让你对后面要学习的animation 有一个基本的认识。

话不多说，跟我开始吧。

这就是我们最终要实现的效果，还是比较简单的，拿来当做一个入门动画的小案例再好不过了。

<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 动画的同学可以独自写一写代码，相信你们一定能够对动画有自己的理解的，同时对接下来的学习也会起到很大的帮助。跟进我的脚步吧，跟我一起在 2020 年前掌握 css 动画！

以上就是本文章的全部内容了，如果有不正确的地方欢迎指正。

感谢您的阅读，如果感觉有用不妨点赞 / 转发。

前端深入系列是一个踩坑系列，是由我本人对工作和学习中所遇到的问题和踩过的坑的一个探索与总结，在此记录分享出去，同时也是对自我技能的一个反思和追问。

前端路漫，踩坑不断。

前端深入系列持续更新中……

以上 2019-10-24。

前端深入之css篇丨初探transform手把手带你实现1024程序员节动画

写在前面

1024 动画案例

搭建静态页

制作简单动画

最终效果

结论

结语

站内搜索