CSS3-动画

作用:使用CSS3创建动画

兼容性: ie10+

demo

简单用法

1.创建动画

@keyframes demo
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes demo /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

2.使用动画

div
{
animation: demo 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

复杂用法

请用百分比来规定变化发生的时间,0% 和 100%,等同于关键词 "from" 和 "to"。

0% 是动画的开始,100% 是动画的完成。

@keyframes demo2
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes demo2 /* Safari and Chrome */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:demo2 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

无限循环:animation: demo2 5s infinite ;

播放10次:animation: demo2 5s 10;

脉动demo:

@-webkit-keyframes pulse {
 from {
   opacity: 0.0;
   font-size: 100%;
 }
 to {
   opacity: 1.0;
   font-size: 200%;
 }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}