css3怎么设置过渡效果花费的时间

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3怎么设置过渡效果花费的时间相关的知识,希望对你有一定的参考价值。

 transition的语法:

transition: property duration timing-function delay;

第二个参数就是过渡所需要的时间。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>HTML5学堂</title>
    <style type="text/css">
        .h5course 
            width: 200px;
            height: 200px;
            background-color: #39f;
            /*3s就是过度的时间*/
            -webkit-transition: height 3s ease-in;
            -o-transition: height 3s ease-in;
            transition: height 3s ease-in;
        
        .h5course:hover 
            height: 500px;
        
    </style>
</head>
<body>
    <div class="h5course">学习HTML5,到HTML5学堂</div>
    <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
</body>
</html>
参考技术A 酬程延秋夜即事见赠(韩翃)

以上是关于css3怎么设置过渡效果花费的时间的主要内容,如果未能解决你的问题,请参考以下文章

css3过渡和动画的区别详解

CSS3 过渡效果transition的基本使用

css3平滑过渡效果怎么让宽度向左滑动

css3中的过渡效果和动画效果

使用css3显示/隐藏元素的css过渡效果[重复]

认识CSS3特性之过渡