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!
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-2-2，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读