html动画效果代码模板

在网页设计中，动画效果是非常重要的元素之一。HTML提供了丰富的功能来实现各种动画效果。下面我们将给大家介绍一些HTML动画效果的代码模板。

/*普通的淡入淡出效果*/
.fade-out {
  opacity: 0;
  transition: opacity .5s ease-in-out;
}
.fade-in {
  opacity: 1;
  transition: opacity .5s ease-in-out;
} 

/*旋转效果*/
.rotate {
  animation-name: rotate-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes rotate-animation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*缩放效果*/
.scale {
  animation-name: scale-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes scale-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

/*闪烁效果*/
.blink {
  animation-name: blink-animation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes blink-animation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

以上就是一些HTML动画效果的代码模板。通过这些简单的代码，我们可以实现各种各样的动画效果来为网页增色添彩。