css3 transition-duration属性笔记

原创 国哥笔记  2018-01-25 21:03  阅读 2,018 views 次

transition-duration属性定义及用法

在css中,transition-duration属性是用来定义过渡效果要持续的时间(单位:秒/毫秒)。通常与transition-property、transition-delay、transition-timing-function属性一起使用来实现元素的动态效果。

相关属性

属性值

  • 时间:持续多少时间(单位秒(S)或毫秒(ms))。

说明:1、transition-duration属性的默认值为0,不会有效果;2、定义该属性必须先定义transition-property属性,不然也是没有效果。

语法格式:

transition-duration:时间;

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 transition-duration属性笔记</title>
<style type="text/css">
div{width:120px;height:120px;}
#td1{background:#987;transition-property:width;transition-duration:3s;}
#td2{background:blue;transition-property:width;transition-duration:5s;}
div:hover{width:400px;}
</style>
<head/>
<body>
<div id="td1">
请将鼠标放到这里看效果
</div>
<div id="td2">
请将鼠标放到这里看效果
</div>
</body>
</html>
</html>

运行结果:

css3 transition-duration属性笔记

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css_transition-duration.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情