css中怎么设置动画效果

CSS是网页设计的重要组成部分，可以帮助网站添加各种各样的效果。其中，动画是吸引用户注意力的重要手段之一。那么，CSS中该如何设置动画效果呢？
首先，我们需要定义一个动画，通过@keyframes规则实现。比如，我们可以定义一个从左往右移动的动画：

@keyframes moveRight {
  from {left: 0;}
  to {left: 100px;}
} 

其中，moveRight是动画名称，from和to是动画开始和结束的状态，left表示元素相对于父元素的左边距。
然后，我们需要将这个动画应用到具体的元素上。可以使用animation属性，如下：

.box {
  animation: moveRight 1s ease-in-out infinite;
} 

其中，box是一个div元素的类名，1s表示动画时长，ease-in-out表示动画的缓动效果，infinite表示动画循环无限次。
除了使用animation属性，我们还可以使用transition属性实现动画效果。与animation不同的是，transition只能实现简单的状态变化，比如鼠标悬停时改变背景颜色：

.box {
  transition: background-color 1s ease-in-out;
}

.box:hover {
  background-color: #FF0000;
} 

在box元素上，我们定义了背景颜色在1秒内缓慢变化的动画，当鼠标悬停在box元素上时，会立刻将背景颜色变为红色。
综上所述，通过使用@keyframes规则、animation属性和transition属性，我们可以实现各种各样的CSS动画效果，为网页设计增添更多的乐趣。