CSS3快速上手之15：动画

最新推荐文章于 2025-08-11 16:47:56 发布

Owen的Blog

最新推荐文章于 2025-08-11 16:47:56 发布

阅读量385

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML CSS

本文链接：https://blog.youkuaiyun.com/u011775523/article/details/52781791

HTML 同时被 2 个专栏收录

45 篇文章

订阅专栏

CSS

22 篇文章

订阅专栏

本文通过三个实例详细介绍了如何使用CSS3动画实现颜色变换、按时间比例改变颜色以及结合位置变化的复杂动画效果。

1.代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>网页title</title> 
<style> 

/*---范例 1：变换颜色---*/
.c1
{
	width:50px;
	height:50px;
	background:red;
	/*---把 "change_color" 动画捆绑到 c1类，时长：2 秒---*/
	animation:change_color 1s;
	-webkit-animation:change_color 1s; /* Safari and Chrome */
}

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

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

/*---范例 2：按照时间比例改变颜色---*/
.c2
{
	width:50px;
	height:50px;
	background:red;
	/*---把 "change_color_percent" 动画捆绑到 c2类，时长：5 秒---*/
	animation:change_color_percent 5s;
	-webkit-animation:change_color_percent 5s; /* Safari and Chrome */
}


@keyframes change_color_percent
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-moz-keyframes change_color_percent /* Firefox */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-webkit-keyframes change_color_percent /* Safari and Chrome */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-o-keyframes change_color_percent /* Opera */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}


/*---范例 3：改变背景色和位置，并重复执行。---*/
.c3
{
	width:50px;
	height:50px;
	background:red;
	position:relative;
	/*---把 "move_and_changecolor" 动画捆绑到 c3类，时长：4 秒---*/
	animation:move_and_changecolor 4s linear 1s infinite alternate;
	-webkit-animation:move_and_changecolor 4s linear 2s infinite alternate; /* Safari and Chrome */
}

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

</style>
</head>
<body>

<p>范例一：网页开始时是红色方块，然后有1秒的时间，方块由红变黄，结束后变回红色。</p>
<div class="c1"></div>

<p>范例二：网页开始时是红色方块，然后有5秒的时间，方块由红-->黄-->蓝-->绿，结束后变回红色。</p>
<div class="c2"></div>

<p>范例三：改变背景色和位置，并重复执行。。</p>
<div class="c3"></div>

</body>
</html>

2.结果：