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. 声明动画的播放序列

• 定义：@keyframes mao { 写动画 }

注：mao为动画名称

• 写法

法一：from{ transform: translatex(0px); } to{ transform: translatex(200px);}
法二：0%{} 60%{} 70%{} 90%{} 100%{}