css3有关动画制作的属性

CSS3提供了许多有关动画制作的属性，我们可以用它们来实现各种各样的动画效果。

/* 通过transition实现简单动画效果 */.box {
      width: 100px;
      height: 100px;
      background-color: blue;
      transition: width 1s, height 1s, background-color 1s;
}
.box:hover {
      width: 200px;
      height: 200px;
      background-color: red;
}
/* 通过animation实现复杂动画效果 */@keyframes move {
  0% {
    transform: translateX(0);
}
  50% {
    transform: translateX(200px);
}
  100% {
    transform: translateX(0);
}
}
.box {
      width: 100px;
      height: 100px;
      background-color: blue;
      animation: move 2s infinite;
}
     

上面的代码中，我们使用了transition和animation两个属性来实现动画效果。

transition属性可以让我们在元素状态改变时平滑地过渡到新状态，从而产生动画效果。在上面的代码中，我们定义了一个.box元素，并且为它设置了一个:hover伪类。当鼠标悬停在.box元素上时，它的宽度和高度都会从100px变成200px，背景色也会从蓝色变成红色。transition属性就是让这些状态的改变产生平滑的过渡效果。

animation属性则可以让我们创建更加复杂的动画效果。在上面的代码中，我们定义了一个名为move的关键帧，它包含了三个关键帧，分别对应元素的移动状态。然后我们为.box元素设置了一个animation属性，把move关键帧和一个2秒的无限循环绑定在一起。这样，我们就实现了一个让.box元素无限往返移动的动画效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！