1.变换(Transform)
1.矩阵变换:matrix()
含六值参数值:a,b,c,d,e,f
-moz-transform:表示火狐内核
-webkit-transform:表示chrome,safari
-ms-transform:表示IE浏览器
.test .matrix {
-moz-transform: matrix(0, 1, 1, 1, 10px, 10px);
-webkit-transform: matrix(0, 1, 1, 1, 10, 10);
-o-transform: matrix(0, 1, 1, 1, 10, 10);
-ms-transform: matrix(0, 1, 1, 1, 10, 10);
transform: matrix(0, 1, 1, 1, 10, 10);
}
2.平移:translate(), translateX(), translateY()
translate(<length>[, <length>]): 指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
translateX(<length>): 指定对象X轴(水平方向)的平移
translateY(<length>): 指定对象Y轴(垂直方向)的平移
transform: translate(10px, 10px);
3.旋转:rotate()
rotate(<angle>): 指定对象的2D rotation(2D旋转),需先有transform-origin属性的定义
transform: rotate(-5deg);//参数为负值:逆时针旋转
transform: rotate(5deg);//参数为正值:顺时针旋转
4.缩放:scale()
第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值
scaleX(<number>): 指定对象X轴的(水平方向)缩放
scaleY(<number>): 指定对象Y轴的(垂直方向)缩放
transform: scale(1.2);
transform: scale(.8);
5.扭曲:skew()
skew(<angle> [, <angle>]): 指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
skewX(<angle>): 指定对象X轴的(水平方向)扭曲
skewY(<angle>): 指定对象Y轴的(垂直方向)扭曲
transform: skew(-5deg, -5deg);
2.过渡效果(Transition)
[ transition-property ]: 检索或设置对象中的参与过渡的属性
[ transition-duration ]: 检索或设置对象过渡的持续时间
[ transition-timing-function ]: 检索或设置对象中过渡的动画类型
[ transition-delay ]: 检索或设置对象延迟过渡的时间
transition-property:border-color, background-color, color;
transition-duration:.5s, .5s, .5s;
transition-timing-function:ease-in, ease-in, ease-in;
transition-delay:.1s, .1s, .1s;
3.动画(Animation)
关键帧的定义:keyframes 标识符
动画的调用:Animation
//例如:
@keyframes animations3 {
0% {//注意:动画执行的百分比时间点0%不能简写为0!
transform: translate(160px);
opacity: 0;
}
50% {
transform: translate(130px);
opacity: 1;
}
70% {
transform: translate(125px);
opacity: 1;
}
100% {
transform: translate(100px);
opacity: 0;
}
}
1.animation:复合属性。检索或设置对象所应用的动画特效。
animation:animation 2s ease-out;
2.animation-direction:检索或设置对象动画在循环中是否反向运动
normal: 正常方向
alternate: 正常与反向交替
3.animation-duration:设置对象动画的持续时间
4.animation-play-state:设置对象动画的状态
running: 运动
paused: 暂停
小白也有在努力!