1.animation动画

　　transition属性只能简单模拟动画效果，而animation属性可以制作类似Flash动画

　　通过关键帧控制动画的每一步，使元素从一中样式变为另一种样式，实现复杂的动画效果

2.@keyframes，用于声明动画，指定关键帧

　　帧，用于分解动画动作，每一帧代表某个时间点

　　书写格式：

　　@keyframes name（自定义名称）{

　　　　from | 0% {　　CSS样式　　}

　　　　percent | n% {　　CSS样式　　}

　　　　to | 100% {　　CSS样式　　}

　　}

3.animation属性，用于调用及控制由@keyframes定义的动画

　　简写属性书写格式：animation：name  duration  timing-function  delay  iteration-count  direction

　　animation-name，设置需要调用的@keyframes动画的名称

　　animation-duration，播放动画持续的时间周期，时间单位 s/ms

　　animation-timing-function，设置动画播放的时间曲线，属性值与 transition-timing-function相同，包括 linear、ease、ease-in、ease-out、ease-in-out等

　　animation-delay，设置动画何时开始（延迟时间）

　　animation-iteration-count，设置动画播放的次数，属性值：n（数值，默认为1）、infinite（无限次/永远）

　　animation-direction，设置循环交替时反向播放动画，

　　　　　　　　　　　  属性值：normal（正常播放，默认）、reverse（反向播放）、alternate（奇数次正向播放、偶数次反向播放）、alternate-reverse（奇数次反向播放、偶数次正向播放）

　　animation-fill-mode，规定当动画未播放时（播放完或开始前）应用到元素的样式，

　　　　　　　　　　　  属性值：none（无样式，默认）、forwards（在动画结束后（由animation-iteration-count决定）应用该属性值）、

　　　　　　　　　　　　　　　　backwards（应用在animation-delay定义期间启动动画的第一次迭代的关键帧中定义的属性值）

　　　　　　　　　　　　　　　　both（同时遵循forwards和backwards 的规则）

　　animation-play-state，运行或暂停动画，属性值：paused（暂停）、running（运行，默认）

4.轮播图测试代码

5.border绘制三角形、梯形

　　

出处：https://www.cnblogs.com/husa/p/13434973.html