css3学习 理论之动画
一、transform
语法:none|<transform-function>[<transform-function>]* 初始值是none。
transform-function函数取值:
matrix():定义矩阵变换。
translate():移动元素对象。
scale():缩放元素对象。
rotate():旋转元素对象。
skew():倾斜元素对象。
例如(兼容浏览器):
1.rotate()函数:transform: rotate(-90deg);-o-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
2.scale()函数:transform: scale(2);-o-transform: scale(2);-moz-transform: scale(2);-webkit-transform: scale(2);
当为scale传递不同的参数值时,缩放动画效果是不同的。scale(1,2)意思是宽度保持不变,高度变为原来的2倍。scale(1,-2)意思是宽度保持不变,高度变为原来的2倍且旋转180度。
3.translate()函数:transform: translate(4px, 6px);-o-transform: translate(4px, 6px);-moz-transform:translate(4px, 6px);-webkit-transform: translate(4px, 6px);参数可以是负的像素值。
4.skew()函数:transform: skew(30deg, -20deg);-o-transform: skew(30deg, -20deg);-moz-transform: skew(30deg, -20deg);-webkit-transform: skew(30deg, -20deg);会改变元素的形状,而rotate函数不会改变元素的形状。
5.matrix()函数:transform: matrix(3,2,3,5,0,0);-o-transform: matrix(3,2,3,5,0,0);-moz-transform: matrix(3,2,3,5,0,0);-webkit-transform: matrix(3,2,3,5,0,0);参数为6个数值。
二、transform-origin
CSS变形的原点,默认是对象的中心点。transform-origin接受两个参数,他们可以是百分比、em、px等具体的值,也可以是left、right、center、top、middle、bottom等关键字。
例如:
transform-origin: top right;-o-transform-origin: top right;-moz-transform-origin: top right;-webkit-transform-origin: top right;
transform-origin: 0 0;-o-transform-origin: 0 0;-moz-transform-origin: 0 0;-webkit-transform-origin: 0 0;
transform-origin: 0 100%;-o-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-webkit-transform-origin: 0 100%;
transform-origin: 50% 100%;-o-transform-origin: 50% 100%;-moz-transform-origin: 50% 100%;-webkit-transform-origin: 50% 100%;
三、transition--过渡
1.transition-property:定义转换动画的CSS属性名称。可以是none|all|CSS属性列表。
例如:
transition-property:background-color;-o-transition-property:background-color;-moz-transition-property:background-color;-webkit-transition-property:background-color;
2.transition-duration:定义转换动画的时间长度。
例如:
transition-duration: 3s;-o-transition-duration: 3s;-moz-transition-duration: 3s;-webkit-transition-duration: 3s;
3.transition-delay:定义过渡动画的延迟时间。
例如:
transition-delay: 3s;-o-transition-delay: 3s;-moz-transition-delay: 3s;-webkit-transition-delay: 3s;
4.transition-timing-function:定义转换动画的效果。
取值可以是:
ease:缓解效果。
ease-in:渐显效果。
ease-out:渐隐效果。
ease-in-out:渐显渐隐效果。
linear:线性效果。
cubic-bezier:特殊的立方贝塞尔曲线效果。cubic-bezier(0.3, 0, 0.5, 1.0)。
例如:
transition-timing-function: linear; -o-transition-timing-function: linear;-moz-transition-timing-function: linear;-webkit-transition-timing-function: linear;
四、animation
1.animation-name:动画名字。
2.animation-duration:动画时间。
3.animation-timing-function:动画播放方式。
4.animation-delay:动画开始播放时间。
5.animation-iteration-count:播放次数。infinite表示无限次。。
6.animation-direction:动画播放方向。normal--动画的每次循环都向前 alternate--第偶数次向前,奇数次向后。
例如:
div {
-webkit-transform-style: preserve-3d;
-webkit-animation-name: ani;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
/* 下面调用动画 */
@-webkit-keyframes ani {
0% {
-webkit-transform: rotateX(0deg);
}
25% {
-webkit-transform: rotateX(180deg);
}
50% {
-webkit-transform: rotateX(360deg);
}
75% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(360deg);
}
}
五、transform-style
两个取值:preserve-3d:表示绘制的场景为3D。flat:子元素不参与3D转换。