Forum : Animation css3

Bonjour,

Alors voila j'ai suivie le tuto sur le site pour les animations css3 et j'ai réalisé ce template :

Donc déjà l'animation ne fonction pas sous ie/fox/safari mai le truc qui me gène vraiment c'est que l'animation ce décale si la résolution et plus élevé et inversement "je la cache en responsive a partir de 800px".

Dons je ne vois pas quoi faire pour réglé ce souci le jqueri peut être ? mai je ne connait pas.

Voici la syntaxe utilisé :

#logo{
     width:915px;
     height:71px;
     margin:0 auto;
     margin-bottom:20px;
     background:url(images/BF4_logoWht.png) center no-repeat;   
         -moz-animation-name: 'logo'; /* nom de l'animation */
         -moz-animation-duration: 2s; /* temps de l'animation (4s) */
     -ms-animation-name: 'logo'; /* nom de l'animation */
         -ms-animation-duration: 2s; /* temps de l'animation (4s) */
     -o-animation-name: 'logo'; /* nom de l'animation */
         -o-animation-duration: 2s; /* temps de l'animation (4s) */
         -webkit-animation-name: 'logo'; /* nom de l'animation */
         -webkit-animation-duration: 2s; /* temps de l'animation (4s) */
         /*animation-iteration-count: infinite; /* nombre de boucles (infinie) */
         /*-webkit-animation-timing-function: linear; /* accelération de l'animation (constant) */   
}

@-o-keyframes logo{
     0% {margin-left:100%;}
     100%{margin-left:217px;}
}
@-ms-keyframes logo{
     0% {margin-left:100%;}
     100%{margin-left:217px;}
}
@-moz-keyframes logo{
     0% {margin-left:100%;}
     100%{margin-left:217px;}
}
@-webkit-keyframes logo{
     0% {margin-left:100%;}
     100%{margin-left:217px;}
}

J'espère que vous trouverez une astuce et vous en remercie d'avance :) .

3 réponses

Benjamin Derepas,

il y a 12 ans

Alors déjà, ton site n'est pas responsive :)

@keyframes logo
{
0% {margin-left:100%;}
100% {margin-left:217px;}
}
@-webkit-keyframes logo
{
0% {margin-left:100%;}
100% {margin-left:217px;}
}
@-ms-keyframe logo
{
0% {margin-left:100%;}
100% {margin-left:217px;}
}
@-moz-keyframe logo
{
0% {margin-left:100%;}
100% {margin-left:217px;}
}
#logo{
animation:logo ease 2s;
-webkit-animation:logo ease 2s;
-ms-animation:logo ease 2s;
-moz-animation:logo ease 2s;
}

Est ce que cela fonctionne avec ce code ?

neecride,

il y a 12 ans

Mon site n'est pas responsive ? j'ai un site de teste ici chez moi il et bien responsiv j'ai bien suivi le tuto, quand je redimensionne ma page en 800px je vois bien mon site faire ce que lui est demander pareil pour 500px.

Pour l'anime je vais tester ça merci !

Pewel-OutOfNutella,

il y a 12 ans

Un site en responsive design ne doit JAMAIS avoir de slider horizontal.
Responsive design = design s'adaptant à tout type de résolution.

C'est fait pour justement ne pas zoomer, dézoomer etc.
Certaines parties de ton site d'adaptent bien, en effet. Mais ce n'est pas le cas de tout ton site.

A partir du moment où il y a un slider horizontal qui apparait parce que la taille du contenu dépasse la taille de la fenêtre, ton site n'est pas en responsive design.