Bonjour.
Je teste les keyframes. Voici donc mon code, le but étant de faire disparaitre la page sous un voile noir progressif :
J’ai 2 problèmes :
1. cela ne fonctionne absolument pas avec FF 8. FF n’est toujours pas pleinement compatible avec ce genre d’animation ? Ou le problème vient de mon code ?
2. Sur Safari, cela fonctionne bien, mais l’anim ne reste pas sur l’état de la "dernière image", l’image noire. Une fois l’anim finie la page ré-affiche son état initial. Il y a un truc pour éviter que cela n’arrive ?
Modifié par Derwoed (04 Dec 2011 - 20:12)
Je teste les keyframes. Voici donc mon code, le but étant de faire disparaitre la page sous un voile noir progressif :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
background-image: linear-gradient(top, #FFFFFF 0%, #EEEEEE 60%);
background-image: -o-linear-gradient(top, #FFFFFF 0%, #EEEEEE 60%);
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #EEEEEE 60%);
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #EEEEEE 60%);
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #EEEEEE 60%);
}
#voile {
position: fixed;
left: 0pt;
top: 0pt;
width: 100%;
height: 100%;
z-index: 9000;
}
@-webkit-keyframes 'voileAnim' {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes 'voileAnimMoz' {
0% {opacity: 0;}
100% {opacity: 1;}
}
.voileAnim {
background-color: #000;
opacity: 0;
-webkit-animation-name: voileAnim;
-webkit-animation-delay: 1s;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-moz-animation-name: voileAnimMoz;
-moz-animation-delay: 1s;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-out;
}
</style>
</head>
<body>
<div id="voile" class="voileAnim"> </div>
</body>
</html>J’ai 2 problèmes :
1. cela ne fonctionne absolument pas avec FF 8. FF n’est toujours pas pleinement compatible avec ce genre d’animation ? Ou le problème vient de mon code ?
2. Sur Safari, cela fonctionne bien, mais l’anim ne reste pas sur l’état de la "dernière image", l’image noire. Une fois l’anim finie la page ré-affiche son état initial. Il y a un truc pour éviter que cela n’arrive ?
Modifié par Derwoed (04 Dec 2011 - 20:12)