[分享]css3指定动画

CSS3指定动画是网页设计中常用的一项技术，通过CSS3的动画效果可以大大提升网页的设计效果，使网页更具吸引力。在CSS3中，使用keyframes关键字可以指定一个动画，并为它指定一系列的关键帧。/...

CSS3指定动画是网页设计中常用的一项技术，通过CSS3的动画效果可以大大提升网页的设计效果，使网页更具吸引力。在CSS3中，使用@keyframes关键字可以指定一个动画，并为它指定一系列的关键帧。

/*指定动画*/
@keyframes myAnimation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

/*应用动画*/
.myElement {
  animation: myAnimation 2s ease-in-out infinite;
} 

上述样式定义了一个名为myAnimation的动画，该动画从0%到100%的整个过程中分别对透明度属性进行了不同程度的变化。接着，通过将该动画应用到一个元素中，使该元素在2秒钟内从零透明度到完全不透明度产生连续的变化。

上述代码中的关键帧可以使用百分比表示，也可以使用关键字from和to表示。例如，上述代码中的0%可以改为from，100%可以改为to。

/*指定动画*/
@keyframes myAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*应用动画*/
.myElement {
  animation: myAnimation 2s ease-in-out infinite;
} 

除了设置关键帧的属性外，还可以在关键帧中设置transform属性，如下所示：

/*指定动画*/
@keyframes myAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*应用动画*/
.myElement {
  animation: myAnimation 2s linear infinite;
} 

此处实现了一个元素在2秒内连续旋转360度的动画效果。

总之，通过CSS3的@keyframes关键字指定动画效果可以轻松实现网页设计中的多种动态展示效果，使网站更加生动有趣，吸引用户关注。