css - 使用css3添加显示:block but with a delay

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

尝试相应地调整这段代码

.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;}
}