关于动画animation那点事儿

初学animation

什么是animation？

animation是css3中新增的一个属性，可以定义元素的动态效果

有哪些具体属性

CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

来动手写个例子

animation: 3s ease-in 1s infinite reverse both running slidein;

这是MDN上的例子，主要是属性定义了动画过程的时间，运动曲线，延迟时间，是否反复，是否复位，属性名称等等。

@keyframes slidein {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes是什么？

@keyframes是定义动画名称的，我们可以自己定义动画，将运动轨迹，颜色变换，3d变换；

只要是你想的，都可以

我们还可以结合现有库定义好的动态效果来完成自己想要的动画。

不过现有的都是比较基础的效果，要想做出高大上的动效，还要我们去发挥丰富的想象力！