2019了，你连CSS动画都不会？

2019年了，我还经常在面试中遇到不会CSS动画的同学。看到简历上写着“熟练掌握CSS3”的，我都会顺口问问动画相关的问题。

“CSS 动画了解吗？”

“啥是CSS动画？”

“动画属性有哪些？”

发现：都2019年了，还有很多同学不会CSS动画。

这个发现，让我很吃惊。

2019年了，已经进入移动互联网时代，信息爆炸的时代，一个不会动起来的作品，跟一潭死水没啥区别。

看看那些大厂出品的产品，动效做得多么赏心悦目。作为程序员，我们都应该具备做动效的能力。

CSS动画，就是我们要掌握的技能之一。

接下来，我以一个需求为背景，带你认识CSS动画。

需求：一个小球从向右匀速移动200px，然后移动回来，再移动过去，最后停留在200px处。

就是这么简单的一个需求，仍有不少同学做不出来。

不要怀疑你的能力，耐心看完本文，你就会掌握CSS动画，学会做这个动画。

本文共分3部分：

1. CSS动画基础
2. transform属性
3. animation属性

首先，我们来看看CSS动画的基础知识。

CSS动画基础

CSS动画，是指用CSS来实现的动画效果。

CSS动画有很多种属性，比如：

• animation-name：动画名称
• animation-duration：动画持续时间
• animation-timing-function：动画的运动曲线
• animation-delay：动画的延迟时间
• animation-iteration-count：动画的重复次数
• animation-direction：动画的方向
• animation-fill-mode：动画的填充模式

这些属性，共同构成了一个动画。

接下来，我们来看看transform属性。

transform属性

transform属性，用于对元素进行变换，比如：

• 平移：transform: translate(x, y)
• 旋转：transform: rotate(angle)
• 缩放：transform: scale(x, y)
• 倾斜：transform: skew(x, y)

transform属性，是实现CSS动画的关键属性。

最后，我们来看看animation属性。

animation属性

animation属性，用于定义一个动画。

animation属性的语法格式如下：

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode;

其中：

• animation-name：动画名称
• animation-duration：动画持续时间
• animation-timing-function：动画的运动曲线
• animation-delay：动画的延迟时间
• animation-iteration-count：动画的重复次数
• animation-direction：动画的方向
• animation-fill-mode：动画的填充模式

好了，以上就是CSS动画的基础知识。

掌握了这些知识，你就可以自己做CSS动画了。

现在，我们回到需求上来，看看如何用CSS动画实现这个需求。

首先，我们先定义一个动画名称。

@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}

这个动画名称，表示了一个元素从向右移动200px，然后移动回来，再移动过去，最后停留在200px处。

接下来，我们把这个动画名称应用到元素上。

.ball {
  animation: move 2s infinite;
}

这样，我们就完成了这个动画。

现在，你已经学会了CSS动画。

如果你想了解更多关于CSS动画的知识，可以参考以下资源：

• CSS动画教程
• CSS动画属性
• CSS动画示例

好了，以上就是本文的全部内容。

希望本文能对你有所帮助。