关键帧 例如：
调用关键帧：
语法 animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction
animation-name 由 @keyframes 创建的动画名称
animation-duration过渡时间
animation-timing-function过渡方式
animation-delay延迟时间
animation-iteration-count 动画的播放次数 通常值为1次 特殊值infinite为无限播放
animation-direction动画的播放方向，alternate为偶数次向前播放，normal动画每次都是循环向前播放
练习如下：
该图形的变化从左上角到右上角来回跳动的一个过程
linear 规定以相同速度开始至结束的过渡效果
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
perspective:500px透视 也可以理解为视距，可以理解为 你的眼睛距离物体的距离 距离物体越近 物体就越大，距离物体越远 物体就越小
transform: rotateZ(30deg) rotateZ是绕着z轴旋转 正值是顺时针旋转 负值是逆时针旋转
transform: rotateY(30deg) rotateY是绕着y轴旋转 正值是向里面旋转 负值是向外面旋转
transform: rotateX(30deg)rotateX是绕着x轴旋转 正值是向里面旋转 负值是向外面旋转
transform: rotate(30deg)参数a取正值时元素相对原来中心顺时针旋转
transform: translate3d(0, 0, 200px)效果如下:
translate3d(0,0,200px) 表示z轴向前移动二楼200px（近大远小的原理）
translate3d 里面分别表示x轴距离 y轴距离 和z轴距离
要想实现3d效果必须要在父元素上加上一个属性perspective
如果想让子元素有3d的效果 必须要给父元素设置transform-style，默认值是flat， 想变成3d效果要把值设置成preserve-3d
也可以 设置旋转后的div的上下位置，在.b:hover里面加上transform-origin：top/bottom/left/right
transform 不会使DOM脱离文档流，当通过 translateX 等属性值移动了元素后，它仍然占据原来的位置。好处是， transform 制作的动画会直接进入合成阶段，避开重排重绘，可以通过 Performance 录制面板来查看 transform 动画的效率。
MDN animation
深入浅出CSS动画
MDN animate()
监听 CSS animation 动画的事件:
这些监听事件对 animate() 是无效的。
页面顶部经常会见到水平无限轮播的公告。
由于轮播的内容是动态的，可能很多，也可能很少，如果公告内容的宽度没有超过最大宽度限制，那么就不应该轮播，如果超过了，则发起轮播。
假设我们永远只有一条最新的公告
原理：当一次动画执行结束时，影子内容的头部刚好对准轮播内容的初始位置，那么下次动画开始时，轮播内容将重新回到初始位置，由于影子内容与轮播内容相同，那么就给人造成一种无限轮播的错觉。
逻辑实现：父元素设置了 overflow: hidden ，又想要获取父元素、子元素的真实宽度，那么可以通过 scrollWidth 获取。
兼容性：如果不支持 animate() ，那么我们可以动态创建 <style>+ @keyframes ，插入 <head>, 但也要记得移除。
css3 实现对动态加载的dom加载动画效果：body {
background: #222
}
figure {
position: absolute
margin: auto
top: 0
bottom: 0
left: 0
right: 0
width: 6.250em
height: 6.250em
animation: rotate 2.4s linear infinite
}
.white {
top: 0
bottom: 0
left: 0
right: 0
background: white
animation: flash 2.4s linear infinite
opacity: 0
}
.dot {
position: absolute
margin: auto
width: 2.4em
height: 2.4em
border-radius: 100%
transition: all 1s ease
}
.dot:nth-child(2) {
top: 0
bottom: 0
left: 0
background: #FF4444
animation: dotsY 2.4s linear infinite
}
.dot:nth-child(3) {
left: 0
right: 0
top: 0
background: #FFBB33
animation: dotsX 2.4s linear infinite
}
.dot:nth-child(4) {
top: 0
bottom: 0
right: 0
background: #99CC00
animation: dotsY 2.4s linear infinite
}
.dot:nth-child(5) {
left: 0
right: 0
bottom: 0
background: #33B5E5
animation: dotsX 2.4s linear infinite
}
@keyframes rotate {
0% {
transform: rotate( 0 )
}
10% {
width: 6.250em
height: 6.250em
}
66% {
width: 2.4em
height: 2.4em
}
100% {
transform: rotate(360deg)
width: 6.250em
height: 6.250em
}
} @keyframes dotsY {
66% {
opacity: .1
width: 2.4em
}
77% {
opacity: 1
width: 0
}
}
@keyframes dotsX {
66% {
opacity: .1
height: 2.4em
}
77% {
opacity: 1
height: 0
}
} @keyframes flash {
33% {
opacity: 0
border-radius: 0%
}
55% {
opacity: .6
border-radius: 100%
}
66% {
opacity: 0
}
}
