css3动画属性与过渡属性有所不同,它不需要事件触发,调用关键帧即可。
制作动画时我们需要先制定关键帧
@keyframes 关键帧的名称{
from{ 开始状态 }
to{ 结束状态 }
}
比较繁琐的动画可采用如下方法指定关键帧:
@keyframes 关键帧的名称{
0%{ 开始状态 }
25%{ 过程状态 }
50%{ 过程状态 }
75%{ 过程状态 }
100{ 结束状态 }
}
注释:百分比可自定义,过程状态个数可自定义。
制定好关键帧以后,可通过animation复合属性在元素css样式中调用相应的关键帧。(animation适用于css2,css3)
animation-name 关键帧的名称
animation-duracion 动画持续的时间
animation-delay 动画的延迟时间
animation-timing-function 动画的运动类型(加速度、减速度、匀速、贝塞尔曲线)
animation-iteration-count 动画运动的次数,默认一次 infinite无限循环
animation-direction 运动的方向
属性值: -reverse 让动画反方向运动
-alternate 让动画先正向运动一次再反向运动一次,持续交替运行
-alternate-reverse 先反向再正向,持续交替运行
常用的复合写法:animation: 属性值1,属性值2,属性值3,属性值4,属性值5,属性值6;
animation-play-state 动画的运行状态 (常用来做鼠标事件)
属性值: pushed 暂停
runing 运行
动画属性配合使用变换属性
1、transform变换属性特点主要用来实现元素的一系列变形。
a、位置的移动 transform:translate();
2D空间中位移参数注释:
当括号中只有一个参数值时,如果数值为正数则向右下方位移;
当括号中有两个数值时则第一个数值表示在X轴上位移的距离,第二个数值表示在Y轴上位移的距离。
单独设置X/Y的位移距离:
transform:translateX();
transform:translateY();
3D空间中位移参数注释:
transform:translate3D(X,Y,Z);表示向X、Y、Z轴分别位移的距离,可以为负数。
单独设置Z轴位移距离:
transform:translateZ(),参数值不能为百分比。
b、旋转(默认绕着中心点进行旋转)transform:rotate();参数单位为deg(角度)
2D空间中旋转:
单独设置围绕某个轴旋转:
transform:rotateX();
transform:rotateY();
3D空间中旋转增加:
transform:rotateZ();
transform:rotate3D(X,Y,Z,a);【0不旋转,1旋转】
X,Y,Z值都为一个0~1之间的数值,主要用来描述元素分别围绕X轴、Y轴、Z轴旋转的矢量值,a为一个角度值,用来指定元素在3D空间旋转的角度,如果值为正的,元素顺时针旋转,如果值为负的,则逆时针旋转。
c、缩放 transform:scale();参数值:(0~1缩小,大于1放大)
transform:(参数1,参数2);
参数1:X轴缩放的比例;
参数2:Y轴缩放的比例;
注:如果两个参数相同的情况下只写一个
单独设置X/Y
transform:scaleX();
transform:scaleY();
d、倾斜 transform:skew();参数单位为deg(角度)
transform:skew();
单独设置X/Y
transform:skewX();
transform:skewY();
transition 是css3过渡属性,用于平滑的改变css的值,必须通过鼠标事件触发
transition是一个复合属性,属性如下:
transition-property 检索或设置对象中参与过渡的属性
属性值:需要参加过渡的属性 (all 能支持过渡的属性都会过渡变换)
transition-duration 检索或设置对象过渡的持续时间
transition-delay 检索或设置对象延迟的时间
transition-timing-function 检索或设置对象中过渡的运动类型(加速度、减速度、匀速…)
简写形式:transition:属性值1,属性值2,属性值3,属性值4;