css3 h5常用动画效果

CSS3和HTML5作为前端开发的重要技术，提供了众多的动画效果，用于增强用户体验。下面我们来介绍一些常用的CSS3和HTML5动画效果。

1. 转场动画（Transition）

.box {
      width: 100px;
      height: 100px;
      transition: width 2s, height 2s;
}
.box:hover {
      width: 200px;
      height: 200px;
}

2. 旋转动画（Transform）

.box {
      width: 100px;
      height: 100px;
      transform: rotate(45deg);
}

3. 淡入淡出动画（Opacity）

.box {
      opacity: 0;
      transition: opacity 1s;
}
.box:hover {
      opacity: 1;
}

4. 闪烁动画（Animation）

.box {
      width: 100px;
      height: 100px;
      animation: blink 1s infinite;
}
@keyframes blink {
  50% {
        opacity: 0;
  }
}

5. 翻转动画（Transform）

.box {
      width: 100px;
      height: 100px;
      transform-style: preserve-3d;
      transition: transform 1s;
}
.box:hover {
      transform: rotateY(180deg);
}
    

以上就是常用的CSS3和HTML5动画效果，可以通过它们来为网页增加更多的交互效果，提升用户体验。

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