utilisez css3 pour ajouter display: block mais avec un délai - css3, sass

Vous vous demandez s'il y a un moyen d'ajouter display:block; en ligne, mais avec un petit délai de 3 secondes ... sans JS, et avec CSS (3) en ligne avec les styles

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

Réponses:

Utiliser l'animation css http://www.w3schools.com/css/css3_animations.asp C’est le seul css sensible au temps que je connaisse.

animation-fill-mode peut aider; Spécifie un style pour l'élément lorsque l'animation ne joue pas (lorsqu'elle est terminée ou lorsqu'elle a un délai)

Essayez d'ajuster ce code en conséquence

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