css3动画简单案例

简单案例1：

<body>
    <div>叶落森</div>
</body>

div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;/*把 "myfirst" 动画捆绑到 div 元素，时长：5 秒*/
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
	color:yellow;
	text-align:center;
	line-height:100px
}

@keyframes myfirst
{
	from {background:red;color:yellow}
	to {background:yellow;color:red}
}

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

简单案例2：

div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;/*定位，为下面的top和left使用*/
	animation-name:myfirst;/*把 "myfirst" 动画捆绑到 div 元素*/
	animation-duration:5s;/*时长：5 秒。默认是 0*/
	animation-timing-function:linear;/*规定动画的速度曲线，匀速。默认是 "ease"。*/
	animation-delay:2s;/*规定动画何时开始。默认是 0。*/
	animation-iteration-count:infinite;/*规定动画被播放无限次数。默认是 1*/
	animation-direction:alternate;/*规定动画在下一周期逆向地播放。默认是 "normal"。*/
	animation-play-state:running;/*规定动画是否正在运行或暂停。默认是 "running"。*/
	/* Safari and Chrome: */
	-webkit-animation-name:myfirst;
	-webkit-animation-duration:5s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-delay:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	-webkit-animation-play-state:running;
}

@keyframes myfirst
{
	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 myfirst /* 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;}
}

<body>
    <div></div>
</body>

猜你喜欢