Css3 animation related properties

Css3 animation related properties

Transition animation

Definition: the transformation of certain attributes of an element from one state to another

width:200px—->width:400px

transition: time-movement curve of the duration of the property to be delayed;
transition: width 1s 0s linear
movement curve:
uniform speed linear
from fast to slow ease default value
from slow to fast to slow ease-in-out

Multiple value transition

transition:bgackground-color  1s  linear, width 1s linear ,height 1s linear;

transition:all 1s linear;  all关键字是浏览器自动设置所有触发的属性的过渡

Deformation animation

2d deformation

transform: deformation type;

Translate

transform:translate(x,y);
x:水平平移  +x 水平向右平移  -x水平向左平移
y:垂直平移  +y 垂直向下平移  -y垂直向上平移

Rotate

顺时针:+角度  deg度数 
transform:rotate(45deg);

逆时针:-角度 
transform:rotate(-45deg)

Set rotation center point

The default deformation center of 2d deformation is the center point of the box transform-origin: 50% 50% / center center;

transform-origin:xpx ypx / % % /right center left top bottom

Scale

transform:scale(m,n);  m代表宽度缩放倍数  n代高度的缩放倍数
m=0.5 宽度缩小为原来的一半(0.5倍)
m=2  宽度放大到原来的2倍   >1放大  <1缩小

Tilt skew

transform:skew(x,y);  +deg向坐标轴的正方向的反方向倾斜  -deg 向坐标轴的正方向倾斜
x代表水平方向切斜的度数
y代表垂直方向倾斜的度数

3d deformation

Keyframe animation

1. Define animation

@keyframes 动画名 {
//动画有几个关键状态  2个关键状态 from{}to{}
//动画有多个关键帧 n个
	0% {
	} 20% {
	} 50% {
	} 75% {
	} 100% {
	}

}

2. Use animation

animation: Whether the name of the animation lasts for a time delay time. Whether the number of executions of the motion curve is round trip. The state of the animation after the last frame is completed.

Animation name: animation-property: move;
duration time animation-duration: 5s;
delay time animation-delay: 2s;
motion curve animation-timing-function: linear uniform speed / ease slow (default) / ease-in / ease-in-out
animation-iteration-count: 2 / infinite unlimited times
Whether the back-and-forth movement animation-direction: normal is normal / alternate reverses
the state after the last frame is completed Keep the initial state of the last frame / backwords (default);
animation-play-state: running / paused;