摘 要：CSS3 作为HTML5 的一个重要组成部分除了在网页布局和美化网页方面有强大的功能，还新增了超强的动画设计特性，在论述CSS3 动画的基本原理之后，对CSS3 的transition 动画技术和animation 动画的技术进行了剖析与研究，最后结合两个典型案例技术分析总结了如何在Web 前端设计中运用CSS3 制作精美动画特效的方法。
关键词：CSS3；transition 动画；animation 动画；关键帧
中图分类号：TP393 文献标识码：A 文章编号：2096-4706（2020）10-0084-03
Research on the Application of CSS3 Based Animation Effects in Web Front-end Design
DONG Lihong1，YANG Shuang1，LIU Guikun2
（1.Zhengzhou Information Technology School，Zhengzhou 451464，China；2.Information Engineering University，Zhengzhou 450002，China）
Abstract：As an important part of HTML5，CSS3 not only has powerful functions in webpage layout and beautifying webpage，but also adds super strong animation design features. After discussing the basic principles of CSS3 animation，in this paper，the transition animation technology and animation technology of CSS3 are analyzed and studied. At last，combining with two typical case technologies， the method of how to use CSS3 to make fine animation effects in Web front-end design is summarized.
Keywords：CSS3；transition；animation；keyframe
参考文献：
[1] 周文洁.HTML5 网页前端设计 [M]. 北京：清华大学出版社，2017.
[2] 熊慧.HTML5 和CSS3.0 在网页设计中的新特性分析探讨 [J]. 信息记录材料，2018，19（6）：106-107.
[3] 闫鹏. 浅析CSS3 动画在Web 前端中的应用 [J]. 电脑知识与技术，2019，15（17）：233-234.
作者简介：
董丽红（1970—），女，汉族，河南郑州人，正高级讲师，本科，研究方向：Web 移动应用技开发；
杨爽（1988—），女，汉族，河南许昌人，讲师，硕士，研究方向：Web 移动应用技开发；
刘贵坤（1966—），男，汉族，辽宁庄河人，副教授，硕士，研究方向：计算机网络。