All geek questions in one place

Css Move an item from left to right animated

I have an element that needs to be moved from left to right and from right to left when I change the left and right variables.

Here is an example jsfiddle I'm working on. It moves from left to right and right to left, but there is no animation.

What am I doing wrong?

CSS

JSFiddle demo

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>
+6
source share
3 answers

This is because you are not giving the non-hovering state the right attribute.

right not set, so it tries to switch from nothing to 0px . Obviously, because he has nothing to do, it will just “roll over”.

If you provide an unknown state a right:90%; he will switch as you like.

As a note, if you still want it to be in the very left corner of the page, you can use the calc css function.

Example:

 right: calc(100% - 100px) ^ width of div

You do not need to use left .

In addition, you cannot switch with left or right auto and you will get 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 calc() function only works on IE10 +

+12
source

try it

 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

+5
source

You should try to do this using css3 animation . Check out the following code:

 <!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 helpful.

Thanks.

+3
source

Source: https://habr.com/ru/post/969947/

More articles:


All Articles