关于css3的动画总结

旋转：transform:rotate（xxdeg）
扭曲：transform:skey(x,y)
缩放：transform:scale（x，y）
变形位移：transform:translate（x,y）/translateX(x)/translateY(y);
变形-矩阵：transform:matrix(a,b,c,d,e,f)（1，0，0,1，x,y)跟translate差不多
原点：transform-origin（top,bottom ,left,right）（设置变形的原点可以用百分比也可以用关键词，比如center）

过渡
transtion-property()

div {
width: 200px;
height: 200px;
background: red;
margin: 20px auto;
-webkit-transition-property: width;
transition-property: width height opacity;//在这里设置要变化的属性
-webkit-transition-duration:.5s;
transition-duration:.5s;//指定完成过渡所需的时间5s
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;//指定过渡函数
-webkit-transition-delay: .18s;
transition-delay:.18s;//指定开始出现的延迟时间
}
div:hover {//这里写目标值
width: 400px;
height:400px;
opacity:0.3;
}

 

transition-property:指定过渡或动态模拟的CSS属性

transition-duration:指定完成过渡所需的时间5s

transition-timing-function:指定过渡函数
ease;linear;ease-in;ease-out;ease-in-out;

ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)

linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)

ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)

ease-out: cubic-bezier(0, 0, 0.58, 1.0)

ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

transition-delay:指定开始出现的延迟时间

@Keyframes name
(1){form{}
to{}
}
(2)@Keyframes changecolor{
0%{
background: red;
}
20%{
background:blue;
}
40%{
background:orange;
}
60%{
background:green;
}
80%{
background:yellow;
}
100%{
background: red;
}
}
动画调用animation：name;(animation: changecolor 5s ease-out .2s;)
animation-name: changeColor;
animation-duration: 5s;
animation-timing-function: ease-out;ease-in
animation-delay: .1s;
animation-iteration-count:infinite;//设置动画播放次数，infinite表示播放无数次，也可以为任意整数；
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

animation-direction:normal | alternate [, normal | alternate]*//设置动画播放方向

其主要有两个值：normal、alternate

1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；

2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

animation-play-state属性主要用来控制元素动画的播放状态。

其主要有两个值：running和paused。

 

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：

none

默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处

forwards

表示动画在结束后继续应用最后的关键帧的位置

backwards

会在向元素应用动画样式时迅速应用动画的初始帧

both

元素动画同时具有forwards和backwards效果