css中怎么添加动画效果

CSS中添加动画效果是一种很有趣的设计方式。下面就让我们一起来了解一下在CSS中添加动画效果的方法。
首先，我们需要在CSS文件中添加一个@keyframes声明，该声明用来描述动画效果的过渡状态。@keyframes声明里包含了多个关键帧，以百分比形式（或关键字如“from”和“to”）来描述当前帧的样式，例如：

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
} 

上面的样式定义了从红色过渡到黄色的动画效果。我们可以通过将这个动画效果应用于某个元素的class属性来使用它，如下：

.example {
  animation-name: example;
  animation-duration: 4s; /*动画时长*/
  animation-timing-function: linear; /*动画过渡方式*/
  animation-delay: 2s; /*动画延迟播放时间*/
  animation-iteration-count: infinite; /*动画重复播放次数*/
} 

上面的代码将动画效果应用于一个名为“example”的类上。在这个类上设置了动画的属性，如动画的名字、时长、过渡方式、延迟及重复播放次数。
除了使用关键帧方式，我们还可以使用CSS过渡属性实现动画效果，如下：

.example {
  transition: background-color 1s linear;
}
.example:hover {
  background-color: red /*鼠标悬浮时触发颜色过渡*/
} 

上面的代码实现了当鼠标悬浮在元素上方时触发背景颜色的过渡效果。在元素上设置transition属性来指定过渡的属性以及过渡的时长和过渡方式。
总结：通过关键帧和过渡属性的方式，我们可以在CSS中轻松的添加动画效果，为我们的页面增加更多的趣味性。