css3之animation属性

最新推荐文章于 2024-04-18 10:56:23 发布

枫叶在飘呀

最新推荐文章于 2024-04-18 10:56:23 发布

阅读量319

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/ld16631069828/article/details/113731836

版权

css3 css

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>