首页 > html5+css > css基础知识 > CSS3中的动画
2017
08-20

CSS3中的动画

CSS3中的动画中使用的属性在各个浏览器中的支持是不一定兼容的,我们在属性钱添加前缀来实现各个浏览器的兼容

-ms-兼容IE9

-webkit-兼容Safari和Chrome

-o-兼容Opera

-moz-兼容Firefox

为了节省篇幅,下面仅出现一次兼容性的语句,之后都不做兼容,在实际使用中自行添加兼容性语句。

一、2D转换,通过transform 属性实现

transform-origin: x y; //设置转换时的相对中心,默认为元素的中心,使用此属性可以改变默认值。

transform-origin: bottom left; //设置转换时的相对中心,默认为元素的中心,使用此属性可以改变默认值。

1、translate()方法位移

div{

transform: translate(50px,100px);

-ms-transform: translate(50px,100px); /* IE 9 */

-webkit-transform: translate(50px,100px); /* Safari and Chrome */

-o-transform: translate(50px,100px); /* Opera */

-moz-transform: translate(50px,100px); /* Firefox */

}

translateX(n)和translateY(n)表示单独设置X轴和Y轴的位移。

表示将元素从左向右移动50像素,从上向下移动100像素。

2、rotate()方法旋转

div{transform: rotate(30deg);} //deg表示度,一个圆是360度

表示元素顺时针旋转30度。允许负值,元素将逆时针旋转

3、scale()方法缩放

div{transform: scale(2,4);}

表示宽度转换为原始尺寸的2倍,把高度转换为原始高度的4倍。

scaleX(n)和scaleY(n)表示单独设置宽度和高度的倍数。

4、skew()方法翻转

div{transform: skew(30deg,20deg);}

围绕X轴把元素翻转30度,围绕 Y 轴翻转20度。

skewX(angle)和skewY(angle)表示单独围绕X轴和Y轴翻转的度数。

5、matrix()方法把所有2D转换方法组合在一起

二、3D转换,也是通过transform 属性实现,只不过比2D转换多了一个Z轴

1、translate3d(x,y,z)定义X、Y、Z轴的位移

translateX(x)、translateY(y)、translateZ(z)

2、rotate3d(x,y,z,angle)定义3D旋转

rotateX(angle)、rotateY(angle)、rotateZ(angle)

3、scale3d(x,y,z)定义3D缩放

scaleX(x)、scaleY(y)、scaleZ(z)

3D转换的一些属性设置:

transform-style: flat|preserve-3d;规定被嵌套的元素在3D中如何呈现,flat表示子元素不保留其3D位置,preserve-3d表示子元素保留其3D位置。

backface-visibility:visible|hidden;规定3D元素的背面是否可见

三、过渡效果,使用transition属性实现过渡效果

过渡是元素从一种样式逐渐改变为另一种的效果。要实现过渡必须规定希望把效果添加到哪个CSS属性上和效果的时长(单位可以是s或者ms)两项内容。

如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开:

div{transition: width 2s, height 2s, transform 2s;}

transition属性为一个简写属性,可以有4个参数值,其中第一个为必须参数,第二个不指定则没有实际意义,后两个参数可以省略。这4个参数分别对应下面4个属性:

transition-property:规定应用过渡的css属性名称

transition-duration:定义过渡效果花费的时间。默认是 0。

transition-timing-function:规定过渡效果的时间曲线。默认是 "ease"。

linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。

ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。

ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。

ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。

ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。

cubic-bezier(n,n,n,n) 在cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay:规定过渡效果何时开始,及设置过渡多长时间之后开始。默认是 0。

四、css3中的动画,要在CSS3中创建动画,需要@keyframes规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。然后使用animation属性绑定该动画规则实现元素的动画效果。

@keyframes myfirst{

from {background: red;}

to {background: yellow;}

}

div{animation: myfirst 5s;}

1、@keyframes规则中用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

2、绑定并设定动画:

animation 所有动画属性的简写属性,除了animation-play-state 属性

animation-name 规定 @keyframes 动画的名称。

animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

animation-timing-function 规定动画的速度曲线。默认是 "ease"。

animation-delay 规定动画何时开始。默认是 0。

animation-iteration-count 规定动画被播放的次数。默认是 1。设置为infinite表示无线次数循环。

animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。设置为alternate则表示轮流反向播放。

animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。设置为paused表示暂停动画。

animation-fill-mode 规定对象动画时间之外的状态。

none 不改变默认行为。

forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。

both 向前和向后填充模式都被应用。

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。