[Résolu] Plusieurs animations pour un seul élement ?

Bonjour tout le monde, j'ai un soucis avec une animation CSS

.je{
  -webkit-animation: move 2.8s ease-out;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes move{
  0%{-webkit-transform: translateX(100vw) skew(-20deg);}
  80%{-webkit-transform: skew(-20deg);}
  90%{-webkit-transform: skew(20deg);}
  100%{-webkit-transform: translateX(50vw) skew(0deg);}
}

La translation ne s'arrete pas à 50vw, l'élement passe de 100vw à 0 puis retourne à 50vw, j'imagine que c'est parce que je n'ai pas mis de translate à 80% et 90%, mais je ne veux pas faire ça à cause du ease-out, le ease-out rends mon animation saccadé avec plus de 2 frames, puisqu'il agis sur chaque frame et j'ai vu quelque part qu'il était possible de faire ça avec plusieurs animations, comme ça :

.je{
  -webkit-animation: move 2.8s ease-out, sk 2.8s ease-in-out;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes move{
  0%{-webkit-transform: translateX(100vw) skew(-20deg);}
  100%{-webkit-transform: translateX(50vw) skew(0deg);}
}
@-webkit-keyframes sk{
  0%{-webkit-transform: skew(-20deg);}
  80%{-webkit-transform: skew(-20deg);}
  90%{-webkit-transform: skew(20deg);}
  100%{-webkit-transform: skew(0deg);}
}

Mais ça ne marche qu'avec un delay sur la seconde animation, mais je veux les deux animation en même temps, or là seul l'animation "sk" s'effectue.
Vous avez une idée ?

Encore une idée :

.je{
  -webkit-transform : translateX(100vw) skew(-20deg);
  -webkit-animation: move 2.8s ease-out;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes move{
  80%{-webkit-transform: skew(-20deg);}
  90%{-webkit-transform: skew(20deg);}
  100%{-webkit-transform: translateX(50vw) skew(0deg);}
}

(… tous ces -webkit- sont-ils vraiment nécessaires ?)


Modifié par Zelena (30 Jul 2017 - 19:15)

Ah bah oui !!
Maintenant que tu le dis c'est évident, ça va me faire un code tout crado, mais c'est évident !
Merci beaucoup.

EDIT : pour les webkit probablement pas, mais comme j'avais des soucis d'animation je voulais voir si les webkit réglaient le problème, mais ouais je vais les virer maintenant.
Et la deuxieme solution ne fonctionne pas pour moi, ".je" passe de 100vw à 0 puis à 50vw, ta première solution est au poil faudra juste que je tache de faire ça propre.
Modifié par Harianrhod (30 Jul 2017 - 19:29)