CSS动画相关

1.transition动画过渡属性

• transition-property 设置过渡属性
• transition-duration 设置过渡时间，默认为0s
• transition-timing-function 设置过渡效果函数
• transition-delay 设置过渡效果延迟执行时间

2.animation动画属性

• -webkit-animation-name 设置动画的名称
• -webkit-animation-duration 设置动画的持续时间
• -webkit-animation-timing-function 设置动画的缓动效果函数
• -webkit-animation-delay 设置动画的延迟执行时间
• -webkit-animation-iteration-count 设置动画的循环播放次数，默认是1次
• -webkit-animation-direction 设置动画效果是否反向运动
• @keyframs 设置动画的关键帧
• animation-play-state 设置动画暂停或者继续播放 running or pause

3.transform变形属性

• translate(x,y) translateX(x) translateY(y)设置2d偏移
• rotate(deg) 设置2d旋转
• scale(x,y) scaleX(x) scaleY(y) 设置2d缩放
• skew(x-deg,y-deg) skewX(x-deg) skewY(y-deg) 设置2d扭曲变形

4.box-shadow阴影属性

• box-shadow:x y blur spread color inset 设置阴影

5.渐变色

• linear-gradient(direction,startColor,centerColor position,endColor) 设置线性渐变
• linear-gradient(deg,startColor,endColor) 设置角度渐变
• radial-gradient(startColor,endColor) 设置径向渐变