I want to animate an element's position change with CSS transition, but it is not working even when I use the transition on all properties, as in the example here: http://jsfiddle.net/yFy5n/3/
However, I don't want my final solution to apply transition to all properties, but instead only on the position change. So the color change should be instant, only the position change from left to right should be animated (the opposite of what is happening now).
This question is related to
css
css-transitions
You forgot to define the default value for left so it doesn't know how to animate.
.test {
left: 0;
transition:left 1s linear;
}
See here: http://jsfiddle.net/shomz/yFy5n/5/
Please Try this code margin-left:60px instead of left:60px
please take a look: http://jsfiddle.net/hbirjand/2LtBh/2/
as @Shomz said,transition must be changed to transition:margin 1s linear; instead of transition:all 1s linear;
try this:
.test {
position:absolute;
background:blue;
width:200px;
height:200px;
top:40px;
transition:left 1s linear;
left: 0;
}
Source: Stackoverflow.com