Je souhaite animer le changement de position d'un élément avec la transition CSS, mais cela ne fonctionne pas, même si j'utilise la transition sur les propriétés all
, comme dans l'exemple suivant: http://jsfiddle.net/yFy5n/3/
Cependant, je ne souhaite pas que ma solution finale applique la transition à toutes les propriétés, mais uniquement au changement de position. Donc, le changement de couleur doit être instantané, seul le changement de position de gauche à droite doit être animé (l'inverse de ce qui se passe maintenant).
Vous avez oublié de définir la valeur par défaut pour left
afin qu'il ne sache pas comment animer.
.test {
left: 0;
transition:left 1s linear;
}
Voir ici: http://jsfiddle.net/shomz/yFy5n/5/
Veuillez essayer ce code margin-left:60px
au lieu de left:60px
s'il vous plaît jeter un oeil: http://jsfiddle.net/hbirjand/2LtBh/2/
comme @Shomz l'a dit, la transition doit être changée en transition:margin 1s linear;
au lieu de transition:all 1s linear;
essaye ça:
.test {
position:absolute;
background:blue;
width:200px;
height:200px;
top:40px;
transition:left 1s linear;
left: 0;
}