Menu
I have an element that needs to be move from left to right and right to left when I change the left, right variables.
Here is an jsfiddle example that I'm working on it. It moves left to right and right to left but there is no animation.
What I am doing wrong?
CSS:
Demo JSFiddle
div
{
width:100px;
height:100px;
background:red;
transition-property: right, left;
transition-duration: 2s;
-webkit-transition-property: right, left; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
position:absolute;
}
div:hover
{
right:0px;
}
HTML:
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
386
To do that we need to change the transform around it's y-axis. Note that if we make it turn around only at 50% it will slowly turn around at the same time it's moving. So we need to specify how long the potato should be at -webkit-transform: rotateY(0deg); .
To animate with left , top , bottom or right , you either have to have a absolutely positioned or floated element. SO, Change the position to absolute . Also, there was as unclosed braces } before you started to declare the keyframes.
Try this
div
{
width:100px;
height:100px;
background:red;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
position:absolute;
}
div:hover
{
transform: translate(3em,0);
-webkit-transform: translate(3em,0);
-moz-transform: translate(3em,0);
-o-transform: translate(3em,0);
-ms-transform: translate(3em,0);
}<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>DEMO
132
It's because you aren't giving the un-hovered state a right attribute.
right isn't set so it's trying to go from nothing to 0px. Obviously because it has nothing to go to, it just 'warps' over.
If you give the unhovered state a right:90%;, it will transition how you like.
Just as a side note, if you still want it to be on the very left of the page, you can use the calc css function.
Example:
right: calc(100% - 100px)
^ width of div
You don't have to use left then.
Also, you can't transition using left or right auto and will give the same 'warp' effect.
div {
width:100px;
height:100px;
background:red;
transition:2s;
-webkit-transition:2s;
-moz-transition:2s;
position:absolute;
right:calc(100% - 100px);
}
div:hover {
right:0;
}<p>
<b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.
</p>
<div></div>
<p>Hover over the red square to see the transition effect.</p>CanIUse says that the calc() function only works on IE10+
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
