在页面加载时启动css转换

时间:2015-09-08 19:48:11

标签: html css css3

我试图理解CSS过渡 - 但我无法实现它。我想让一行从0到100%宽度,页面加载有一点延迟。我知道CS转换需要一个触发器,并尝试阅读jQuery或Vanilla Js解决方案,但卡住了。

为什么这个工作? Jsfiddle:https://jsfiddle.net/1fzzgnwy/

<div class="container">
<span class="h-line"></span>
</div>

.h-line {
position: absolute;
z-index: -1;
width: 0%;
height: 10px;
right: 0;
background-color: #000;
top: 400px;
transition: right 1.5s linear;
transition-delay: 2s;
}

.h-line.ready {
width: 100%;
background-color: #000;
}

.container {
height:100%;
width:100%;
}

$(function(){
$('.h-line').addClass('ready');
});

1 个答案:

答案 0 :(得分:0)

您的jsfiddle链接(https://jsfiddle.net/1fzzgnwy/)中存在一些错误。

这是您的https://jsfiddle.net/50t3qwmL/工作代码的简化示例。


    .h-line {

        position: absolute;
        top: 0;
        right: 0;

        width: 20px;
        height: 20px;

        background-color: #000;
        transition: .3s;
        transition-delay: 2s;

    }

    .h-line.ready {

        width: 100%;

    }