[分享]css3动画特效标签

CSS3动画特效标签是指一组由CSS3规范定义的标签和属性，可以用于创建各种复杂的动画效果，让网页更加生动和有趣。下面是一些常用的CSS3动画特效标签。/ transition / div { wid...

CSS3动画特效标签是指一组由CSS3规范定义的标签和属性，可以用于创建各种复杂的动画效果，让网页更加生动和有趣。

下面是一些常用的CSS3动画特效标签。

/* transition */
div {
  width: 200px;
  height: 200px;
  background-color: red;
  transition: width 2s, height 2s, background-color 2s;
}

div:hover {
  width: 400px;
  height: 400px;
  background-color: blue;
}

/* transform */
div {
  transform: rotate(45deg);
}

/* animation */
@keyframes move {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

div {
  animation: move 2s ease-in-out infinite;
} 

其中，transition属性可以让元素在发生改变时过渡到新的状态，例如当鼠标悬停在div元素上时，它的宽度、高度和背景颜色都会在2秒内过渡到新的值。

transform属性可以改变元素的形状、位置、大小等，例如通过rotate函数可以让元素以指定的角度旋转。

animation属性可以创建一组关键帧，控制元素在一段时间内的动画效果。在上述代码中，我们定义了一个名为move的关键帧，让一个div元素在2秒内往左移动100%的距离，再往右移动回来，无限循环播放。

总的来说，CSS3动画特效标签让网页的视觉体验更加生动、有趣，有利于吸引用户的注意力，提高网站的留存率和用户体验。