前端攻城狮---css3之过渡动画

最新推荐文章于 2024-04-25 16:16:15 发布

csdn_gyh

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量207

点赞数

本文链接：https://blog.csdn.net/gaoyouhuang/article/details/80674647

版权

前端攻城狮专栏收录该内容

44 篇文章 0 订阅

订阅专栏

今天我们来学习一下css3的过渡动画transition

transition

我们先来看看要如何使用该属性要如何使用。

transition-property
transition-duration
transition-timing-function
transition-delay

如要传入4个值，第一个值表示需要监听过渡的属性，如left top等，但是大多数可以直接设置all，表示监听所有能够被监听到的属性。第二个值表示动画持续的时间。第三个值表示变化的速率，可以是自己定义的也可以css3提供的一些值，如：linear表示匀速＝(cubic-bezier(0,0,1,1))，ease表示先慢后快最后再慢=(cubic-bezier(0.25,0.1,0.25,0.1))，我们可以看到cubic-bezier(0,0,1,1)，就等价与速率的值我们可以去http://cubic-bezier.com/，自己去配去设置自定义速率。第四个值表示延时多少时间开始。

如何触发属性动画

触发一个行为，行为前和行为后属性发生了变化，从而触发属性动画。有哪些行为？下面我们来看看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 60px;
			height: 60px;
			background-color: orange;
			position: absolute;
			top: 100px;
			left: 100px;
			transition:all 1s linear 0s;
		}
		div.haha{
			left: 900px;
		}
	</style>
</head>
<body>
	<div></div>

	<script type="text/javascript">
		var box = document.getElementsByTagName("div")[0];

		box.onclick = function(){
			box.className = "haha";
		}
	</script>
</body>
</html>

我们先给div设置了transition:all 1s linear 0s;表示对全部属性有效，动画时间1s，速率是匀速的，延时0s。然后通过点击事件给div设置了一个left:900px。点击事件触发先后left的值需要从100px-->900px，有属性发生了变法，从而有了动画。我们还可以通过伪去设置属性动画。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 30px;
			height: 30px;
			background: orange;
			 transition:all 2s linear 0s; 
		}
		div:hover{
			width:500px;
			height: 100px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

当鼠标放上时，就会触发属性动画。那么哪些属性可以触发属性动画呢？比如宽高，margin,padding,border,字体背景，大部分都是满足的。