La réalisation d'une image / div fondu avec CSS3, sans l'aide d'un hover
J'ai un div avec une image. En ce moment j'utilise CSS3 animation de fondu le tout, mais la performance est terrible.
Je suis assez sûr que je devrais être à l'aide de transitions. Le problème est que je ne peut pas trouver un exemple qui n'est pas déclenchée par un hover.
Comment puis-je faire en sorte que lorsque la page est chargée, après un délai de 2 secondes, l'image/div fondus dans de 0%?
Pour le moment, comme je l'ai dit avec l'animation, j'ai:
@-webkit-keyframes fadetime {
from {
opacity: 0;
}
50% {
opacity: 0;
}
to {
opacity: 1;
}
}
Des idées? Merci.
Vous pouvez utiliser une transition dans une classe, puis ajouter la classe css au bout de 2 secondes.
OriginalL'auteur user397466 | 2010-07-21
Vous devez vous connecter pour publier un commentaire.
OriginalL'auteur Michael Martin
À l'aide de jQuery est probablement une meilleure façon d'aller:
Où #mainContent est la div vous souhaitez diminuer dans
jQuery est bon comme un secours (à l'aide de Modernizr pour détecter CSS support de l'animation), cependant les animations CSS3 sont beaucoup plus rapide et probablement la voie à suivre dans un avenir proche
OriginalL'auteur Anthony