[分享]css3支持动画吗

CSS3是最近几年来web前端开发中重要的技术之一，它使得网页设计翻开了新的一页。其中，CSS3动画的支持更是让网页元素交互变得更加生动和多彩。 .box { width: 100px; height...

CSS3是最近几年来web前端开发中重要的技术之一，它使得网页设计翻开了新的一页。其中，CSS3动画的支持更是让网页元素交互变得更加生动和多彩。

 .box {
    width: 100px;
    height: 100px;
    background-color: #f44336;
    position: relative;
    animation-duration: 2s;
    animation-name: example;
    animation-iteration-count: infinite;
  }
  
  @keyframes example {
    0% {
      top: 0px;
      left: 0px;
    }
    50% {
      top: 200px;
      left: 200px;
    }
    100% {
      top: 0px;
      left: 0px;
    }
  } 

从上面的代码来看，先定义了一个class为“box”的div，通过animation-duration指定动画周期为2秒，animation-name指定动画为example，animation-iteration-count为动画循环无限次，即无限循环。

接着，使用@keyframes定义了一个名为example的动画，其中根据时间比例设定动画发生的具体位置和状态。在本例中，在0%的位置和100%的位置，box元素的位置是一样的；而在50%的位置时，box元素会向下移动200px，向右移动200px。

总而言之，CSS3动画使得我们可以通过简单的css代码，为网页内容添加各种动态效果，使得网页更具生动性和趣味性，受到了越来越多开发者和用户的追捧。