CSS3变形、过渡及动画的认识。

transform变形

主要包括以下几种：
1、旋转 transform:rotate()

#d1>p:hover{
    transform: rotate(45deg);
}

2、倾斜transform:skew()

#d2>p:hover{
    transform: skew(35deg);
}

3、缩放transform:scale()

#d3>p:hover{
    transform: scale(1.5);
}

4、位移transform:translate()

#d4>p:hover{
    transform: translate(10px,20px);
}

5、原点transform:origin(50% 50%)

#d9>p{
    transition: 2s;
    transform-origin:50% 50%;
}

transition过渡

1、过渡动画的效果transition-property:width;

#d5>p{
/*过渡动画效果*/
transition-property: width;
}

2、过渡动画准备的时间transition-delay:2s

#d6>p{
    /*过渡动画准备的时间*/
    transition-property: width;
    transition-delay: 2s;
}

3、过渡动画持续的时间transition-duration:3s

#d7>p{
    /*过渡效果持续的时间*/
    transition-property: width;
    transition-delay: 2s;
    transition-duration:3s ;
}

***综合写法：transition：width(属性) 3s(持续时间) 5s(等待时间); **

Animation动画

定义动画：keyframes
语法：@keyframes animationName{keyframs-selector{style}}
animationName：动画定义的名称
keyframs-selector：动画时长的百分比
** · **from 与 0% 相同
** · **to 与100% 相同

Animation 播放方式

1、播放方式
播放次数：infinite （无限次循环）
播放速度：animation-timing-function：（规定速度曲线）
　　linear:匀速
　　ease:以低速开始，然后加速，结束时变慢
　　ease-in:以低速开始
　　ease-out:以低速结束
　　ease-in-out:以低速开始和结束
　　cubic-bezier：贝塞尔曲线
　　cubic-bezier(x1,y1,x2,y2)从0-1的值数

2、播放时间
定义动画何时开始：animation-delay: time;
定义动画完成所需时间：animation-duration: time;

3、播放方向
动画播放方向： animation-direction:(方向) 　　
　　normal：默认值，正常播放
　　alternate-reverse：反向开始，来回播放
　　alternate：动画来回播放
　　reverse：反向开始播放

4、播放次数
动画播放次数：nimation-iteration-count:(次数)
　　n:自定义次数
　　infinite：定义动画无限播放

5、不播放时
动画时间外：animation-fill-mode: