CSS animieren ein Div mit absoluter Positionierung von links 0 nach rechts 0

Betrachten Sie dieses Beispiel.CSS animieren ein Div mit absoluter Positionierung von links 0 nach rechts 0

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>

Erwartet: Das rote Rechteck sollte glatt von von Rot nach Blau nach rechts, wie die Farbe ändert sich links animieren.

Tatsächlich: In Chrome/Firefox ändert das rote Rechteck langsam seine Farbe in Violett, teleportiert dann von links nach rechts, ohne zu animieren, und wechselt dann langsam von lila zu blau. In Safari erscheint das Rechteck auf der rechten Seite und bewegt sich nie von dort, während es von rot nach blau animiert wird.

Warum passiert das? Wie kann ich es reparieren? (Ich brauche es in CSS zu beheben ... kein JS, keine jQuery.)

Quelle

2017-05-31 Dan Fabulich

Sie können nicht von einer _property_ zu einer anderen "animieren"; Sie animieren den _value_ einer Eigenschaft. In diesem Fall könntest du, wenn das Element 20% breit ist, einfach von 0 bis 80% animieren. – CBroe

Sie müssen eine Eigenschaft oder die andere animieren. Sie können einfach links animieren und entweder left: calc(100% - elemWidth) (wobei elemWidth die Breite des Elements ist) oder left: 100%; transform: translateX(-100%); verwenden, wenn die Breite des Elements unbekannt ist.

Auch müssen Hintergrundfarbe animieren.

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

 
.animated { 
 
\t position: absolute; 
 
\t width: 20%; 
 
\t height: 100%; 
 
\t top: 0; 
 
\t background-color: red; 
 
\t 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>

Quelle

2017-05-31 21:53:37

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

einfach, wenn Sie right verwendet man Übergang gesagt ganz andere Eigenschaft zu ändern. Das ist, warum Sie zwischen gesprungen sind, was die linke Seite Ihres Bildschirms zu right: 0 ist, was der rechte Rand Ihres Bildschirms ist.

Quelle

2017-05-31 21:50:12 NightKn8

Danke! Kannst du mir helfen zu verstehen, was hier schief gelaufen ist? –

Dadurch wird die Box außerhalb des übergeordneten Elements auf der rechten Seite verschoben. Und es ändert nicht die Hintergrundfarbe. –

aktualisiert den Code. @MichaelCoker OP wollte nur den Übergang von links nach rechts verdeutlichen, Farbe funktionierte gut für ihn. Sogar seine Figur enthält nur den Elementbewegungsteil. – 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>

diese Schnipsel sehen ...

Quelle

2017-05-31 21:55:46 UXDart

Das Problem ist, dass Sie Animieren Eigenschaft starten left, aber es dann mit right in der ersetzen Ende der Animation, deshalb Sprünge. Sie sollten die gleiche Eigenschaft weiter animieren, um den schrittweisen Ablauf der Animation zu erhalten.

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

Quelle

2017-05-31 21:59:00

Dies ist, wie es aussehen sollte:

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

Und das ist die Lösung für sie:

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

Grundsätzlich ist die Animation nur knapp sein Ziel wissen, was zu tun ist, seit du spezifizierst die ursprüngliche Eigenschaft links, nicht jedoch der Zielwert. Es animierte von left:0 zu left:initial. Das Recht erfüllt eine ähnliche Funktion wie die linke, aber noch eine weitere Eigenschaft.

Quelle

2017-05-31 22:00:26 Voidvalkon

CSS animieren ein Div mit absoluter Positionierung von links 0 nach rechts 0

Antwort

Verwandte Themen