Css Animation From Left To Right
Solution 1:
Since this question is still getting alot of attention and none of the soulotions yet provide the full answer that I was trying to achieve, I'll give an example how I solved it some years ago.
First to make the animation go left to right, like many other questions have showed:
#pot {
bottom: 15%;
position: absolute;
-webkit-animation: linear infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
0% {
left: 0;
}
50% {
left: 100%;
}
100% {
left: 0;
}
}<divid="pot"><imgsrc="https://i.stack.imgur.com/qgNyF.png?s=328&g=1"width=100pxheight=100px></div>The problem with only this solution is that the potato goes too far to the right so it gets pushed out from the viewport before turning around. As the user Taig suggested we can use transform: translate solution, but we can also just set 50% { left: calc(100% - potatoWidth); }
Second to make the animation go left to right, without getting pushed out from viewport:
#pot {
bottom: 15%;
position: absolute;
-webkit-animation: linear infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
0% {
left: 0;
}
50% {
left: calc(100% - 100px);
}
100% {
left: 0;
}
}<divid="pot"><imgsrc="https://i.stack.imgur.com/qgNyF.png?s=328&g=1"width=100pxheight=100px></div>And lastly to make potato turn around which I also asked for in the question. 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);. In this example the potato doesn't turn until it's 48% into the animation, then it's able to turn in the span of 48% to 50%.
Third to make the potato turn around in each corner so it doesn't move backwards:
#pot {
bottom: 15%;
position: absolute;
-webkit-animation: linear infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
0% {
left: 0;
}
48% {
-webkit-transform: rotateY(0deg);
}
50% {
left: calc(100% - 100px);
-webkit-transform: rotateY(180deg);
}
98% {
-webkit-transform: rotateY(180deg);
}
100% {
left: 0;
-webkit-transform: rotateY(0deg);
}
}<divid="pot"><imgsrc="https://i.stack.imgur.com/qgNyF.png?s=328&g=1"width=100pxheight=100px></div>Solution 2:
you have to use only the 'left' not the 'right' parameter on your keyframe. You have also some typo on your css, the 'scale' seems useless too.
#pot{
bottom:15%;
position:absolute;
-webkit-animation:linear infinite alternate;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
0% { left: 0;}
50%{ left : 100%;}
100%{ left: 0;}
}
like : online version
Solution 3:
The accepted answer has the flaw that the element is completely pushed out of the viewport during the animation. This might be desired for some use cases, but I wanted to share a cleaner solution that leverages the CSS transform: translate property.
#pot {
bottom: 15%;
display: block;
position: absolute;
animation: linear infinite alternate;
animation-name: run;
animation-duration: 2s;
}
@-webkit-keyframes run {
0% {
left: 0;
transform: translateX(0);
}
100% {
left: 100%;
transform: translateX(-100%);
}
}<imgid="pot"src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1"width="100px"height="100px" />I wrote in a bit more detail about this technique here: https://medium.com/@taig/dynamically-position-and-center-an-html-element-with-css-based-on-percentage-5fea0799a589.
Solution 4:
see the below code it working fine.in the below code when you hover on the potato it runs the image from left to right when you hover back at that time it returns to the left again.while object 3 div runs from left to right whenever you refresh the page there are 2 examples are there you can use anyone.
.object {
position: absolute;
}
.van {
top: 45%;
left: 44%;
}
#axis:hover.move-right{
transform: translate(350px,0);
-webkit-transform: translate(350px,0); /** Chrome & Safari **/
-o-transform: translate(350px,0); /** Opera **/
-moz-transform: translate(350px,0); /** Firefox **/
}
.object {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
.object3 {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */animation-name: example;
animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
/* 50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}*/
}
/* Standard syntax */@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
/* 50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}*/
}<html><head></head><body><divid="axis"class="one"><imgclass="object van move-right"src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1"width=100pxheight=100px></div><divclass="object3"></div></body></html>Solution 5:
<!DOCTYPE html><html><head><style>div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name :example;
animation-duration: 4s;
animation-iteration-count: 3
}
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
100% {background-color:red; left:0px; top:0px;}
}
</style></head><body>Check this example, which moves a block of red div to right and then back to left
Post a Comment for "Css Animation From Left To Right"