All geek questions in one place

CSS animation div with absolute positioning from left to 0 to right 0

Consider this sample.

http://jsfiddle.net/dfabulich/ncbzz5zu/3/

<html>
<body>
<style>
.container {
    position: relative;
    width: 80%;
    height: 100px;
    border: 1px solid black;
}

@keyframes slide {
  from { background-color: red; left: 0; }
  to { background-color: blue; right: 0; }
}

.animated {
    position: absolute;
    width: 20%;
    height: 100%;
    top: 0;
    background-color: red;
    animation-duration: 3s;
    animation-name: slide;
    animation-iteration-count: infinite;
}

</style>
<div class=container>
<div class=animated>
</div></div>

Expected: the red rectangle should smoothly animate from left to right, as the color changes from red to blue.

In fact: in Chrome / Firefox, the red rectangle slowly changes color to purple, then teleports from left to right without animation, and then slowly changes from purple to blue. In Safari, the rectangle appears on the right and never moves from there when animating from red to blue.

Why is this happening? How can i fix this? (I need to fix this in CSS ... no JS, no jQuery.)

+4
source share
5 answers

. left: calc(100% - elemWidth) ( elemWidth - ), left: 100%; transform: translateX(-100%);, .

.

.container {
	position: relative;
	width: 80%;
	height: 100px;
	border: 1px solid black;
}

.animated {
	position: absolute;
	width: 20%;
	height: 100%;
	top: 0;
	background-color: red;
	animation: 3s linear 0s slide infinite;
}

@keyframes slide {
  from { left: 0; }
  to {
    left: 100%;
    transform: translateX(-100%);
    background: blue;
  }
}
<div class=container>
<div class=animated>
</div></div>
Hide result
+7

, left, right , . , .

.container {
    position: relative;
    width: 80%;
    height: 100px;
    border: 1px solid black;
}

@keyframes slide {
  from { background-color: red; left: 0; }
  to { background-color: blue; left: 80%; }
}

.animated {
    position: absolute;
    width: 20%;
    height: 100%;
    top: 0;
    background-color: red;
    animation-duration: 3s;
    animation-name: slide;
    animation-iteration-count: infinite;
}
<div class="container"><div class="animated"></div></div>
Hide result
+1
@keyframes slide {
  from { left: 0;}
  to { left: 80%; } // edit: actually endpoint should point to left:100% minus width of the element so in your case 100%-20% = 80%. In case of width of the element in px use CSS calc like:  left: calc(100% - ##px);
}

, right, , . left: 0, right: 0, .

0

<html>
<body>
<style>
.container {
    position: relative;
    width: 80%;
    height: 100px;
    border: 1px solid black;
}

@keyframes slide {
  0% { background-color: red; left: 0; }
  100% { background-color: blue; left: 100%; margin-left: -20%; }
}

.animated {
    position: absolute;
    width: 20%;
    height: 100%;
    top: 0;
    background-color: red;
    animation-duration: 3s;
    animation-name: slide;
    animation-iteration-count: infinite;
}

</style>
<div class=container>
<div class=animated>
</div></div>
Run codeHide result

see this snippet ...

0
source

Here's how it should look:

http://jsfiddle.net/ncbzz5zu/11/

And this fix for him:

@keyframes slide {
  from { background-color: red;
         left:0%;}
  to { background-color:blue; 
        left:80%;}
}

Basically, the animation did not know what to do, since you specified the initial property left, but not the target value. It is animated from left:0to left:initial. Right performs a similar function on the left, but its another property.

0
source

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

More articles:


All Articles