css3动画属性有哪些

一：transfrom标签 改变元素的位置

1:translate 平移 单位px

translate（x,y） 2d平面 平移距离x轴y轴的距离

translate (x,y,z) 3d平面 平移距离x轴y轴z轴的距离

可以单独设置translateX(x); translateY(y); translateZ(z);

2：roate 旋转 单位 deg

roate（x,y） 2d平面 旋转距离x轴y轴的角度

roate (x,y,z) 3d平面 旋转距离x轴y轴z轴的角度

roate3d(x,y,z) 3d平面 旋转距离x轴y轴z轴的角度

可以单独设置roateX(x); roateY(y); roateZ(z);

3: scale 缩放

scale(n)n为放大几倍，小于1则为缩小，不能小于0，没有单位。

4: skew 倾斜

skew(x,y)倾斜的角度为横坐标，y为纵坐标,单位deg。

transfrom-orgin(x,y) 原点

perspective:(number 单位px)视点

transfrom-style:preserve-3d (构建3d空间)

二：transition：过渡属性

transition:第一个属性值 第二个属性值 第三个属性值 第四个属性值;

1:transition-property: 过渡效果的css的属性名称

2:transition-duration: 过渡需要的时间（单位s或者ms）

一定要写的属性，不然默认为0，动画不播放。

3:transition-timing-function: 过渡的速度

linear:匀速

ease:匀加速

ease-out:匀减速

ease-in-out:先加速后减速

cubic-bezier:贝塞尔曲线

4:transition-delay: 延迟多久时间开始动画

三：@keyframe 关键帧

@keyfamily 名称{

from{开始}

to{结束}

}

最好用百分比的方式写：

@keyfamily 名称{

0%{开始}

50%{中间}

100%{结束}

}

animation 调用关键帧

animation:有六个属性值

第1个属性:animatian-name: 名称(一定和关键帧的名称一样)

第2个属性:animation-duration: 时间(单位s)

第3个属性:animation-time-function: 播放方式:

linear:匀速

ease:匀加速

ease-out:匀减速

ease-in-out:先加速后减速

cubic-bezier:贝塞尔曲线)

第4个属性:animation-delay: 延迟时间 单位s/ms

第5个属性:animation-iteration-count: 动画播放的次数 (infinite无限播放)

第6个属性:animation-direction: 是否反向播放

默认值normal:正常播放 alternate:反向播放

举例:

anmiation:move 3s linear 5s infinite alernate;

就是指 名称为move的动画延迟5秒无限次的匀速反向播放长为3秒的动画。

搭配动画关键帧@keyframe move{

0% {开始}

25%{中间}

50%{中间}

75%{中间}

100%{结束}

}