使用 css3 添加 display:block 但有延迟

Question

想知道是否有办法添加 display:block; 内联，但是有 3 秒的小延迟...没有 JS，并且 CSS(3) 内联样式

.janet-place{
    $width: 138;
    $height: 452;
    width: rcalc($width);
    margin-left: rcalc(50);
    margin-top:rcalc(31);
    padding:hcalc($height,$width)  0;
    display: block; // here after 3 seconds
    @include bkgrd_image('animation/gown.png');
    &.gown{ display: block; // here after 3 more seconds}
    &.janet{ background-image: url("../images/animation/janet.png");}
    background-size: 100%;
}

Answer 1

使用css动画http://www.w3schools.com/css/css3_animations.asp这是我所知道的唯一时间敏感css。

动画填充模式可能有帮助；指定动画未播放时（播放结束时，或有延迟时）元素的样式

Answer 2

尝试相应地调整此代码

.janet-place{
    $width: 138;
    $height: 452;
    width: rcalc($width);
    margin-left: rcalc(50);
    margin-top:rcalc(31);
    padding:hcalc($height,$width)  0;
    display: inline; // here after 3 seconds
    @include bkgrd_image('animation/gown.png');
    &.gown{ display: block; // here after 3 more seconds}
    &.janet{ background-image: url("../images/animation/janet.png");}
    background-size: 100%;

    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 3s;
}


/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    from {display: inline;}
    to {display: block;}
}

/* Standard syntax */
@keyframes example {
    from {display: inline;}
    to {display: block;}
}

使用 css3 添加 display:block 但有延迟

use css3 to add display:block but with a delay

css

sass