28172 sujets

CSS et mise en forme, CSS3

[Résolu] Faire apparaitre une div

Bonjour,

En CSS, je voulais savoir s'il était possible de faire apparaître une DIV pendant quelques secondes, puis la masquer.

L'idéal, si c'est réalisable, serait d'avoir une div qui s'affiche au chargement de la page web, puis qui disparaît progressivement au bout de 5-6 secondes je pense.

T0 : La page est chargée, la div est affichée.
T1...T5 : la div est là bien présente et bien visible.
T6 : La div commence à disparaître
T7...T8 : La div disparaît petit à petit jusqu'à ne plus être visible.

Si la page est rechargée, la div doit réapparaître.

vous pensez que c'est possible ?
J'avoue avoir quelques difficultés avec CSS3 basique, alors avec les transitions... Smiley decu

Je vous remercie vivement de votre aide.
Merci beaucoup !

J'ai reussi grace à ça : lien

et j'ai mis ce code : 

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    position :relative;
    opacity:0;
    -webkit-animation: mymove 5s; /* Chrome, Safari, Opera */ 
    animation: mymove 5s;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    0%   {opacity: 1;}
    50% {opacity: 1;}
    100% {opacity:0;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {opacity: 1;}
    50% {opacity: 1;}
    100% {opacity:0;}
}
</style>
</head>
<body>

<p><strong>Note:</strong> The @keyframes rule is not supported in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Ca fonctionne bien.

Par contre, concernant la propriété opacity, puis-je dire que si le navigateur est IE >= à 9, il la met par défaut à 1, pour être sur que la Div soit vue, même si elle ne disparait pas.
Modifié par Alexbass (29 Dec 2014 - 22:09)
J'ai modifié mon code. comme ça je ne serais pas embêté avec les versions qui ne prennent en charge l'effet ou l'opacité :
div#msg_confirmation {
 float: right;
 padding: 5px;
 margin: 4px;
 font-size: 1em;
 background-color: #d9edf7;
 opacity:1;
  -webkit-animation: mymove 2s; /* Chrome, Safari, Opera */ 
    animation: mymove 2s;
	}
/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
 0% {opacity: 0;}
 100% {opacity:1;}
}
/* Standard syntax */
@keyframes mymove {
 0% {opacity: 0;}
 100% {opacity:1;}
}
Sujet clos
Aller à