web-dev-qa-db-fra.com

CSS animer une div avec un positionnement absolu de gauche à droite

Considérez cet exemple.

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>

Attendu: le rectangle rouge devrait s'animer en douceur de gauche à droite à mesure que la couleur passe du rouge au bleu.

Actual: Dans Chrome/Firefox, le rectangle rouge change lentement de couleur en violet, puis se téléporte de gauche à droite sans animer, puis passe lentement du violet au bleu. Dans Safari, le rectangle apparaît à droite et ne bouge jamais de là, tout en passant du rouge au bleu.

Pourquoi cela arrive-t-il? Comment puis-je le réparer? (Je dois corriger ça en CSS… pas de JS, pas de jQuery.)

csscss-animations
7
Dan Fabulich

Vous devez animer une propriété ou l'autre. Vous pouvez simplement animer à gauche et utiliser soit left: calc(100% - elemWidth) (où elemWidth est la largeur de l'élément) ou left: 100%; transform: translateX(-100%); si la largeur de l'élément est inconnue.

Également besoin d'animer la couleur de fond.

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

12
Michael Coker

Le problème est que vous commencez à animer la propriété left, puis que vous la remplacez par right à la fin de l'animation, c'est pourquoi elle saute. Vous devez continuer à animer la même propriété pour obtenir la progression de l'animation pas à pas.

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

1
Karen Grigoryan
@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);
}

Lorsque vous avez utilisé right, vous avez simplement indiqué à transition de modifier des propriétés totalement différentes. C’est pourquoi vous avez sauté entre left: 0 et le côté gauche de votre écran et right: 0 et le bord droit de votre écran. 

0
NightKn8

<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>

voir cet extrait ...

0
UXDart

Voici à quoi cela devrait ressembler:

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

Et c'est la solution pour cela:

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

En gros, l’animation ne savait pas quoi faire puisque vous avez spécifié la propriété initiale gauche mais pas la valeur cible. Il a animé de left:0 à left:initial. Right remplit une fonction similaire à left mais reste une autre propriété. 

0
Voidvalkon