HTML5动画过度与动画效果

最新推荐文章于 2025-06-26 15:12:22 发布

转载最新推荐文章于 2025-06-26 15:12:22 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/ruoli/blog/1576963

文章标签：

#前端 #ViewUI

本文详细介绍了CSS中的动画过渡（transition）与动画效果（animation）的使用方法。包括transition属性的功能定义及其可定义属性，例如transition-property、transition-duration等。同时，文章还深入探讨了animation属性，包括关键帧的定义及animation-name、animation-duration等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

HTML5动画过度与动画效果

标签：Web前端

1、动画过渡属性 transition

1、transition的功能定义

transition的功能，使css的属性值在一定的时间内平滑地过渡。这种效果可以在鼠标点击、划过、获得焦点或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

2、transition可定义的属性

transition-property:设置哪些属性进行过渡 transition-duration：完成过渡动画效果的时间，默认是0。 transition-timing-function:设置动画的缓动效果，默认是ease（逐渐变慢）。其它常用值：ease-in，加速； ease-out，减速； ease-in-otlt,加速然后减速。 transition-delay:设置动画开始的延迟时间，默认是0

3、代码示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transition-示例-Ruo.L</title>
	<style type="text/css"> 
		.box{ 
			width: 100px;
			height:100px;
			margin:50px auto;
			background-color:#f00;
			transition:all 1s;
		} 
		.box:hover{ 
			width:200px;
			height:200px; 
			border-radius:50%; 
			background-color:#666;
			transition:all 1s ease-in 1s;
			/*transition-property:width,height,border-radius; 
			transition-duration:1s; 
			transition-timing-function:ease-in;
			transition-delay:1s; */
		}
	</style> 
</head>
<body>
	<div class="box"></div>
</body>
</html>

2、动画效果属性 animation

1、animation 定义

"关键帧"(@keyframes),它的样式规则是由多个百分比构成的，如"0％"到 "100％"之间，分别在每一个百分比中，加上不同的属性，从而让元素达到一种在不断变化的效果。语法规则如下： @keyframes 动画名称{ 0％{元素状态} 100％{元素状态} }

2、animation属性

animation-name:@keyframes动画的名称 animation-duration：动画完成一个周期所花费的时间，默认是0。 animation-timing-function:动画的速度曲线（缓动效果），默认是"ease"。 animation-delay:动画开始的延迟时间，默认是0。 animation-iteration-count:动画被播放的次数，默认是1。 animation-direction:动画是否在下一周期逆向地播放，默认是"normal"。 animation-play-state:动画是否正在运行或暂停，默认是"running"。 animation-fill-mode：对象动画时间之外的状态。

3、代码示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animation-示例-Ruo.L</title>
	<style type="text/css"> 
		.box{ 
			width: 100px;
			height:100px;
			margin:50px auto;
			background-color:#f00;
		} 
		.box:hover{ 
			-webkit-animation:hover 1s ease-in infinite; 
			/*—webkit-animation-name:hover; 
			-webkit-animation-duration:1s; 
			-webkit—animation-timing-function:ease-in; 
			-webkit-animation-iteration-count:infinite; 
			*/ 
		}
		@-webkit-keyframes hover{ 
			0%{width:100px;height:100px;border-radius:40%;} 
			50%{width:200px;height:200px;border-radius:60%;} 
			100%{width:100px;height:100px;border-radius:40%;} 
		}
	</style> 
</head>
<body>
	<div class="box"></div>
</body>
</html>

转载于:https://my.oschina.net/ruoli/blog/1576963