CSS动画/转换

1.2/3D转换 transform属性

2D转换

1.translate （x，y）==> 在当前位置向右向下移动

2.rotate（20deg） ==> 元素顺时针旋转20度

3.scale(2,3) ==> 元素增大，宽度2倍，高度三倍

	scaleX(), scaleY() 单独改宽高倍数

4.skew(x,y) 指定倾斜角度

skewX(20deg),skewY(20deg)分别沿X轴或者Y轴倾斜20度

5.matrix( ) 

	matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

3D转换

和2D转换差不多，只是增加了一个Z轴，抽象到三维空间

2.渐变

1.线性渐变 （向上/下/左右/对角线）

background-image: linear-gradient(方向，颜色1，颜色2，。。。 )

方向默认上到下

设置to right ==> 左到右

to bottom right ==>左上到右下

用rgba还可以使用透明度创造渐变效果

repeating-linear-gradient( ) 控制里面参数的百分比可以创造重复线性渐变效果

2.径向渐变（由中心定义）

radial-gradient(形状，中心颜色，，，最远颜色)

形状默认为椭圆形，可以设置circle圆 ellipse椭圆

repeating-radial-gradient( ) 同上

3.过渡 transition

transition ：property duration timing-function delay

默认 ： all 0 ease 0

transition-delay 延迟秒数

transition-duration 持续秒数

transition-property 指定过渡的CSS属性

transition-timing-function 速度曲线

linear 匀速

ease 慢快慢

ease-in 慢到快

4.动画

1.@keyframes

用@keyframes定义动画代码

@keyframes example {
    from {} 
    to {}
    //同样可以在里面用百分比的方式定义动画
    0%
    50%
    100%
    
}

div {
	width:
    height:
    animation-duration: 4s; //不指定动画时间，动画不发生
    animation-name: example;
    
     
}

2.animation

属性 有一些和过渡相同



direction 向前向后播放

	默认值normal 正常播放 

	alternate 奇数次正常，偶数次反向



-fill-mode 不播放时元素样式

	none 不改变默认行为

	forwards 动画完成后保持属性

	backwards 动画完成变回原样



-iteration-count 播放次数

	n 次数

	infinite 无限循环		



-play-state 运行还是暂停

	paused 动画暂停

	running 正在播放