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
orpause
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)
设置径向渐变