css3动画效果transition的用法

时间:2022-06-08
本文章向大家介绍css3动画效果transition的用法，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

下面是一个css3中transition动画的简单例子 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>transition效果</title>
		<style>
			div{
				width:100px;
				height:100px;
				background:#26FFFF;
				content:"";
				transition: width 3s 1s;
			}
			div:hover{
				width:500px;
				
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

上述的例子的功能介绍:鼠标移入色块div,div的宽度则在3s内width变为500px;

上述代码中

transition: width 3s 1s;

transition的属性值简单说明,第一个为监控的属性,这里监控的width,也可以使用all(监控所有的属性,逐一监控的话效率比all高需要监控两个写两个就行) 第二个为动画执行时间,第三个延迟操作时间(操作延时1s进行操作).

一般使用的时候直接写入监控属性和动画执行时间就ok!

随机文章
WEB前端知识点必读
最近更新