CODEWITHSUNDEEP
htmlcss
fobus
fobus

Reputation: 2058

Css Move element from left to right animated

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>

Upvotes: 14

Views: 155663

Answers (3)

AndrewWhite
AndrewWhite

Reputation: 310

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

Upvotes: 10

Albzi
Albzi

Reputation: 15609

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+

Upvotes: 17

miksiii
miksiii

Reputation: 2496

You should try doing it with css3 animation. Check the code bellow:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: myfirst 5s infinite; /* Chrome, Safari, Opera */
    -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation: myfirst 5s infinite;
    animation-direction: alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background: red; left: 0px; top: 0px;}
    25%  {background: yellow; left: 200px; top: 0px;}
    50%  {background: blue; left: 200px; top: 200px;}
    75%  {background: green; left: 0px; top: 200px;}
    100% {background: red; left: 0px; top: 0px;}
}

@keyframes myfirst {
    0%   {background: red; left: 0px; top: 0px;}
    25%  {background: yellow; left: 200px; top: 0px;}
    50%  {background: blue; left: 200px; top: 200px;}
    75%  {background: green; left: 0px; top: 200px;}
    100% {background: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>

<p><strong>Note:</strong> The animation-direction property is not supported in Internet Explorer 9 and earlier versions.</p>
<div></div>

</body>
</html>

Where 'div' is your animated object.

I hope you find this useful.

Thanks.

Upvotes: 3

Related Questions