动画（定义动画，调用动画，动画属性，动画简写属性，速度曲线调节），3D转换（三维坐标系，3D移动translate3d，透视perspective，3D旋转rotate3d），3D呈现，浏览器私有前缀

动画

动画是CSS3中最具有颠覆的特征之一，可以设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

相对于过渡，动画可以实现多变化，更多控制，连续自动播放等效果

制作动画分为两步：

定义动画

/* 定义动画 */
@keyframes move {
    /* 开始状态 */
    0% {
        transform: translate(0);
    }
    /* 结束状态 */
    100% {
        transform: translate(1000px);
    }
}

0%是动画的开始，100%是动画的完成，这样的规则就是动画序列

在@Keyframes中规定某项CSS样式就能创建由当前样式逐渐改为新样式的动画效果

动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数

请用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%

调用动画

div {
    width: 200px;
    height: 200px;
    background-color: #f0f;
    /* 调用动画 */
    animation-name: move;
    /* 持续时间 */
    animation-duration: 2s;
}

动画属性