Css3动画相关的属性

Css3动画相关的属性

过渡动画

定义：一个元素的某些属性从一个状态到另一个状态的变换

width:200px—->width:400px

transition: 要过渡的属性 持续时间 延迟的时间 运动曲线；
transition：width 1s 0s linear
运动曲线：
匀速 linear
由快到慢 ease 默认值
由慢到快再到慢 ease-in-out

多个值过渡

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

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

复合写法
transform：translateX（100px）scale（2）skewX（15deg）；

变形动画

2d变形

transform:变形类型;

平移translate

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

旋转 rotate

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

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

设置旋转中心点

2d变形默认的变形中心是盒子的中心点 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缩小
transform:scale(t); t<0 图像会翻转

倾斜skew

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

3d变形

关键帧动画

1、定义动画

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

}

2、使用动画

animation：动画的名称 持续的时间 延时时间 运动曲线 执行次数 是否往返运动 最后一帧完成后的状态 动画的运动状态

动画的名称: animation-property:move;
持续的时间 animation-duration:5s;
延时时间 animation-delay:2s;
运动曲线 animation-timing-function:linear匀速/ease放缓（默认值）/ease-in/ease-in-out
执行次数 animation-iteration-count:2/infinite无限次
是否往返运动 animation-direction:normal正常/alternate反向
最后一帧完成后的状态 animation-fill-mode:forwards动画最后的状态保持最后一帧/backwords初始状态(默认值);
动画的运动状态 animation-play-state:running/paused;