CSS动画，让你的前端效果更炫酷

在现代的Web设计中，CSS动画变得越来越受到欢迎。CSS3 可实现 HTML 元素的动画效果，而不使用 JavaScript 。这里会简单介绍CSS动画的基础知识，并解释如何开始创建自己的CSS动画。

动画使元素逐渐从一种样式变为另一种样式。

CSS3的动画主要依赖@keyframes和animation来实现。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式

animation

animation既然动画的关键帧都有了，那么就需要把这个关键帧落实并绑定到某个DOM上。

animation动画涉及到CSS属性，这些属性控制了动画的时长、速度、方向和其他属性。

/* 时长 */
animation-duration: 500ms;
/* 速度 */
animation-timing-function: ease-in-out;
/* 方向 */
animation-direction: alternate;
/* 其他 */
animation-fill-mode: forwards;

CSS动画的主要优点在于您可以调整动画的属性，以使其适合您的特定需求。例如，“animation-duration”属性可以控制动画的持续时间，“animation-fill-mode”属性可以设置动画结束后元素的状态，“animation-timing-function”属性可以使您控制动画的加速度。

总之，CSS动画是现代网页设计的重要组成部分。