css3动画属性 匀速

CSS3动画属性使得网页设计变得更加生动有趣。其中，匀速动画属性让动画效果更加自然，让我们来深入了解一下吧。

.animation {
  animation: myAnimation 2s linear infinite;
}

@keyframes myAnimation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(200px);
  }
}

在上述代码中，我们使用了animation属性和@keyframes关键字来创建一个匀速动画。

animation属性中，我们指定了动画持续时间2秒，匀速的动画过渡方式linear，以及无限循环infinite。

@keyframes关键字定义了动画的具体过程。在代码中，我们使用transform属性来移动元素，从初始状态（0%）平移0px，到结束状态（100%）平移200px。

通过这样简单的代码，我们就可以创建出一个匀速移动的动画效果。