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:
