css3动画

css3动画： 过渡动画、平移动画、自定义动画（帧动画）
一、过渡动画transition
transition:all 1s linear;
transition-property: all;
transition-delay: 0s;
transition-duration: 1s;
transition-timing-function: linear;
二、平移动画transform
1.平移：translateX、translateY、translateZ

transform: translateX(100px)  translateY(100px) translateZ(100px);

2.旋转：rotatex、rotatey、rotatez

transform:rotatex(45deg) rotatey(45deg) rotatez(45deg);

3.变形：skew

transform: skew(-45deg);

4.放大缩小：scale

transform: scale(1.2);

注：括号里的值大于1，为放大；小于1，为缩小
三、自定义动画animation
1.animation:动画名称 时间 运动方式 是否循环
动画名称：animation-name: mao；
动画的延迟时间：animation-delay: 1s;
动画的播放方向：animation-direction: alternate;
动画的播放时间：animation-duration: 3s;
动画的播放次数 infinite（循环）：animation-iteration-count: 1;
动画是否播放暂停：animation-play-state: running;
动画的播放方式：animation-timing-function: linear;
例：

.block{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    margin: 0 auto;
    aimation:mao 1s linear ;
   /* animation-fill-mode:forwards;*/
}

2.声明动画的播放序列
（1）定义：@keyframes mao { 写动画 }
注：mao为动画名称
（2）写法
法一：from{ transform: translatex(0px); } to{ transform: translatex(200px);}
法二：0%{} 60%{} 70%{} 90%{} 100%{}