1066次阅读
动画效果

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的角度就行。

发挥想象,你可以做出相当棒的效果了。

如果您觉得此教程不错,想支持一下,您可以通过支付宝扫码给我们一点,不要超过100元哦!
评论请先登录