css3之animation属性

最新推荐文章于 2025-10-05 11:30:30 发布

原创最新推荐文章于 2025-10-05 11:30:30 发布 · 392 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css

css3 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了CSS3中的animation属性，包括animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction的用法，并提供了一个简单的@keyframes动画实例，展示了如何创建和应用动画效果。同时，文章提到了浏览器兼容性问题，例如Chrome、Safari需要使用-webkit-前缀，而Internet Explorer 10及以上版本和Firefox、Opera则直接支持。通过实例，读者可以了解并掌握CSS3动画的基本实现。

css3之animation

animation，是css属性中的简写，它主要有六种动画属性设置，下面简单介绍。

主要包括以下六种：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

基本语法：

animation:name duration timing-function delay iteration-count direction;

下面进行分别介绍：

animation-name	规定需要绑定到选择器的keyframe名称
animation-duration	规定动画需要完成的时间，一般以秒或是毫秒来计数
animation-timing-function	规定动画的速度曲线
animation-delay	规定在动画开始时的延迟时间
animation-iteration-count	规定动画的播放次数
animation-direction	规定是否轮流反向播放动画

了解到以上的用法，我简单介绍一下，@keyframe。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
谈到@keyframe创建动画了，我们考虑一下浏览器的兼容问题，这就是有时候发现我们的动画在某一个浏览器中无法看到其变化。

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

下面，我们用一个简单实例来演示一下animation的用法和规范。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>animation动画篇</title>
		<style type="text/css">
			.content
			{
				width: 100px;
				height: 100px;
				background: #FFA500;
				animation: myanimation 3s 2;
				-webkit-animation: myanimation 3s 2 true;
				-moz-animation: myanimation 3s 2 true;
				position: relative;
			}
			@-moz-keyframes myanimation
			{
				from{left: 100px;top:0px;background-color: aqua;}
				to{left: 200px;top: 100px;background-color: bisque;}
			}
			@-webkit-keyframes myanimation
			{
				from{left: 100px;top: 0px;background-color: aqua;}
				to{left: 200px;top: 100px;background-color: bisque;}
			}
		</style>
	</head>
	<body>
		<div class="content">
			
		</div>
	</body>
</html>