@keyframes创建动画

最近做的一个项目，动画很多，找到了animate.css

发现里面动画效果很多

fadeIn {
  animation-name: fadeIn;
}


@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }


  to {
    opacity: 1;
    transform: none;
  }
}

div{

animation: fadeInDown 5s;

}

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。