CSS3的动画效果有两大类,一种是transitions,它可以支持从一种属性平滑过渡到另一种属性,另一个是Animations,它可以支持某些关键帧的复杂动作。老惯例,先来看个简单的例子:
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>动画</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="normal">normal</div> <div class="normal translate">translate</div> <div class="normal rotate">rotate</div> <div class="normal scale">scale</div> <div class="normal skew">skew</div> </body>check the result
css:
.normal { width : 100px; height : 100px; background : red; margin-left : 100px; transition : all 0.5s linear 0s; -ms-transition : all 0.5s linear 0s; -moz-transition : all 0.5s linear 0s; -webkit-transition : all 0.5s linear 0s; -o-transition : all 0.5s linear 0s; } .translate:hover { transform : translate(100px, 0); /*chrome firefox opera ie*/ -ms-transform : translate(100px, 0); /*ie*/ -moz-transform : translate(100px, 0); /*firefox*/ -webkit-transform : translate(100px, 0); /*chrome 360 sogou baidu safari opera*/ -o-transform : translate(100px, 0); /*baidu*/ } .rotate:hover { transform : rotate(45deg); /*chrome firefox opera ie*/ -ms-transform : rotate(45deg); /*ie*/ -moz-transform : rotate(45deg); /*firefox*/ -webkit-transform : rotate(45deg); /*chrome 360 sogou baidu safari opera*/ -o-transform : rotate(45deg); /*baidu*/ } .scale:hover { transform : scale(2, 0.5); /*chrome firefox opera ie*/ -ms-transform : scale(2, 0.5); /*ie*/ -moz-transform : scale(2, 0.5); /*firefox*/ -webkit-transform : scale(2, 0.5); /*chrome 360 sogou baidu safari opera*/ -o-transform : scale(2, 0.5); /*baidu*/ } .skew:hover { transform : skew(45deg, 0deg); /*chrome firefox opera ie*/ -ms-transform : skew(45deg, 0deg); /*ie*/ -moz-transform : skew(45deg, 0deg); /*firefox*/ -webkit-transform : skew(45deg, 0deg); /*chrome 360 sogou baidu safari opera*/ -o-transform : skew(45deg, 0deg); /*baidu*/ }
上一节的第一个例子,加了transition,同样有浏览器兼容性问题。Transition属性可以让元素从一个状态到另一个状态的改变平滑过渡。它有四个参数,第一个transition-property可以指定需要过渡的属性,一般是all,第二个就是变化的时间,第三个是变化方式,常用的有linear匀速、ease-in加速、ease-out减速、默认是ease逐渐变慢,第四个参数是delay,也就是指定动画延迟多长时间开始执行。我们在hover的时候让元素进行transform,所以鼠标hover就能看到效果啦!
另外一个是Animation,也来看个例子先:
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>动画</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="circle"></div> </body>check the result
css:
@keyframes bubble { 0% { background-color : blue; transform : scale(1, 1); } 10% { background-color : red; transform : scale(1.8, 1.8); } 50% { background-color : blue; transform : scale(2, 2); } 90% { background-color : red; transform : scale(1.8, 1.8); } 100% { background-color : blue; transform : scale(1, 1); } } @-webkit-keyframes bubble { 0% { background-color : blue; -webkit-transform : scale(1, 1); } 10% { background-color : red; -webkit-transform : scale(1.8, 1.8); } 50% { background-color : blue; -webkit-transform : scale(2, 2); } 90% { background-color : red; -webkit-transform : scale(1.8, 1.8); } 100% { background-color : blue; -webkit-transform : scale(1, 1); } } @-moz-keyframes bubble { 0% { background-color : blue; -moz-transform : scale(1, 1); } 10% { background-color : red; -moz-transform : scale(1.8, 1.8); } 50% { background-color : blue; -moz-transform : scale(2, 2); } 90% { background-color : red; -moz-transform : scale(1.8, 1.8); } 100% { background-color : blue; -moz-transform : scale(1, 1); } } @-o-keyframes bubble { 0% { background-color : blue; -o-transform : scale(1, 1); } 10% { background-color : red; -o-transform : scale(1.8, 1.8); } 50% { background-color : blue; -o-transform : scale(2, 2); } 90% { background-color : red; -o-transform : scale(1.8, 1.8); } 100% { background-color : blue; -o-transform : scale(1, 1); } } .circle { width: 100px; height: 100px; margin: 100px; border-radius: 50px; background-color: red; animation-name: bubble; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; -webkit-animation-name: bubble; -webkit-animation-duration: 2s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -o-animation-name: bubble; -o-animation-duration: 2s; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite; -moz-animation-name: bubble; -moz-animation-duration: 2s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; }
首先,我们用@ -webkit-keyframes定义了一个叫做bubble的动画,指定了它在0%,10%,50%,90%和100%这几个关键点的状态。为了兼容性,还是写了四份。在引用的时候,可以通过animation来引用,它有六个属性,第一个是动画名,第二个是时间,第三个是方式,第四个是延时,第五个是次数,第六个是方向(可以设置成奇数次是正方向,偶数次是反方向)。但是只用一个animation写的话,在firefox和ie中是不行的,所以为了浏览器兼容性,建议还是分开写,像示例一样。其实很容易理解,但是为了浏览器兼容性,代码就多起来了,哎!
下面我们来个较为综合的例子,我们做一个旋转的八卦:
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>动画</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="bagua rotate"></div> </body>check the result
css:
body { margin: 0px; padding: 0px; background-color: pink; } .bagua { margin: 20px auto; width : 96px; height: 48px; background: white; border-color: white white black white; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 50%; position: relative; width: 96px; } .bagua:before { content : ""; position : absolute; top : 50%; left : 0; background : white; border : 18px solid black; border-radius : 50%; width : 12px; height : 12px; } .bagua:after { content : ""; position : absolute; top : 50%; left : 50%; background : black; border : 18px solid white; border-radius : 50%; width : 12px; height : 12px; } @keyframes rotate { 0% { transform : rotate(0deg); } 25% { transform : rotate(90deg); } 50% { transform : rotate(180deg); } 75% { transform : rotate(270deg); } 100% { transform : rotate(360deg); } } @-webkit-keyframes rotate { 0% { -webkit-transform : rotate(0deg); } 25% { -webkit-transform : rotate(90deg); } 50% { -webkit-transform : rotate(180deg); } 75% { -webkit-transform : rotate(270deg); } 100% { -webkit-transform : rotate(360deg); } } @-moz-keyframes rotate { 0% { -moz-transform : rotate(0deg); } 25% { -moz-transform : rotate(90deg); } 50% { -moz-transform : rotate(180deg); } 75% { -moz-transform : rotate(270deg); } 100% { -moz-transform : rotate(360deg); } } @-o-keyframes rotate { 0% { -o-transform : rotate(0deg); } 25% { -o-transform : rotate(90deg); } 50% { -o-transform : rotate(180deg); } 75% { -o-transform : rotate(270deg); } 100% { -o-transform : rotate(360deg); } } .rotate { animation-name: rotate; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; -webkit-animation-name: rotate; -webkit-animation-duration: 2s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -o-animation-name: rotate; -o-animation-duration: 2s; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite; -moz-animation-name: rotate; -moz-animation-duration: 2s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; }
首先是八卦的样式,其实八卦就是由两个半圆,一黑一白,然后再又一个白环黑心和一个黑环白心的圆组成,这里,半圆我们用到了border-radius,我们将一边的border设得特别大,然后设置圆角半径,就可以做出一个半圆,而两个圆环就用before和after伪元素来做了。旋转动画就很简单咯,设置rotate的角度就行。
发挥想象,你可以做出相当棒的效果了。