CSS台动画篇时间到 - animation

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

呼~~~前文讲了自适应布局中的flex，想回顾的话，戳链接1、flex应用场景、2、flex容器身上的属性、3、flex项目身上的属性

想了下，动画片时间到了。抓紧时间开始吧~~~

导读：animation与transition的性能探究

transition

transition MDN

顾名思义：过度的意思，只包含两个状态初始状态与结束状态，不存在中间状态，只能完成一个状态向另一个状态的改变，触发过程中只能执行一次

animation && @keyframes

animation MDN

animation动画可以在触发过程中控制动画的每一帧，并且能够多次、重复执行

animation属性是动画一些列属性的一个简写属性形式，一般使用这个就很方便了，不用记忆太多的属性名称

animation: 'name' 'duration' 'timing-function' 'delay' 'iteration-count' 'direction' 'fill-mode';

对于fill-mode做个单独的介绍，有四个属性值，默认值（none）

animation-fill-mode : 'none' | 'forwards' | 'backwards' | 'both';

none: 默认行为；
forwards：当动画完成时，保持**最后一个属性值**（最后一帧中的定义的），做淡入淡出的时候想保持最后一个状态就必须要用这个属性；
backwards：有设置延时时，定义延时之前的状态使用第一帧的样式属性；
both： forwards + backwards；

@keyframes通过定义动画过程中的关键帧的样式来描述 CSS 动画的中间步骤，可以使用百分比也可以使用from to定义一个从开始到结束的动画帧。

如下就设置了一个显示的动画实例，更多好看的动画实例，那就推荐一个71.7kstar的动画库animate.css库，里面有很多的实例，源码在/animate.css/source文件夹内，入口文件是/animate.css/source/animate.css，这个库的代码还是比较好看懂的，都是css，可以拿来本地实测一下，效果都非常不错，满足80%的开发需求吧~~
```
@keyframes show {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.show {
    animation-name: show;
    animation-duration: 2s;
    
    // 等同于
    
    animation: show 2s;
}
```

兼容性

推荐一个查询兼容的网站caniuse，快点我试一试吧，非常不错，js、css、html都可以查询~~~

查询到动画相关属性animation @keyframes的兼容性都还不错，毕竟咱们现在也是紧跟潮流，摒弃某些浏览器了（ie：你们都看我干嘛）

动画实例

简单从animate.css库里面挑几个出来展示一下，实际操作一番，相信能对关键帧以及animation属性有更深的理解~~

淡入、淡出

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

转入、转出

@keyframes rotate-in {
    from {
        opacity: 0;
        transform: rotate3d(0 , 0 ,1, -200deg);
    }
    to {
        opacity: 1;
    }
}
@keyframes rotate-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: rotate3d(0 , 0 ,1, 200deg);
  }
}

心跳

@keyframes heartbeat {
    from {
        transform: scale(1)
    }
    15% {
        transform: scale(1.3)
    }
    30% {
        transform: scale(1)
    }
    45% {
        transform: scale(1.3)
    }
    70% {
        transform: scale(1)
    }
}

本章小结

好嘞，本章节的animation结束，本章节比较简单，动画主要内容是关于@keyframes的定义，animate.css库是个不错的学习库，emmm 下一章节开始transform~~~