css3 帧动画

关键字：keyframes

@keyframes 名字 {
每帧动画的节点------0%[from] {
设定样式
}
50% {
设定样式
}
100%[to] {
设定样式
}
}

兼容处理：
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

动画名字：
animation-name: 动画名字-----定义一个动画名字，写在选择器里，让我们能找到这个动画

动画持续时间：完成整个动画一遍要多长时间
animation-duration: 1s；

动画延迟执行时间：重新打开页面后，动画会延迟开始执行
animation-delay：1s;

动画执行次数：
animation-iteration-count：infinite（无限次）/2（次数）

动画运动方向：
animation-direction:normal/reverse/alternate/alternate-reverse
假设A表示开始的状态，B表示结束状态
normal: ABABABAB
reverse: BABABABA
alternate: ABBAABBA
alternate-reverse: BAABBAAB

建立3D效果：
transform-style:preserve-3d--------设置在父项中，让子项在父项里有3D环境
子元素，也就是里面的面，每个面就根据对应的要求平移或者旋转或者缩放，一般先旋转摆好角度再平移，之后平移的值相同。这样整个3D模型就建好好了。
之后旋转整个坐标系让图产生3D变化的效果