Ende Keyframe-Animation mit CSS3

ich eine einfache Bar Animation Keyframes in CSS erstellt haben verwenden und es zu einem ID-TagEnde Keyframe-Animation mit CSS3

#progress-skill {  
 
    animation: color-bar 2s, animate-bar 2s; 
 
    animation-fill-mode: forwards; 
 
    position: relative;  
 
    border-radius: 3px; 
 
    width: 400px; 
 
} 
 

 
@keyframes color-bar { 
 
    5% { background-color: red;} 
 
    25% { background-color: orange;} 
 
    50% { background-color: yellow;} 
 
    75% { background-color: green;} 
 
    100% { background-color: blue;} 
 
}  
 

 
@keyframes animate-bar { 
 
    from {width: 0px; } 
 
    to {width: 200px; } 
 
}

<div class="progress"> 
 
    <div class="progress-title"><span>SKILL NAME</span></div> 
 
    <div class="progress-bar" id="progress-skill"><span>50%</span></div> 
 
</div>

Die Animation funktioniert gut, mit der Ausnahme, dass die Anwendung Farbe wird immer die 100% Hintergrundfarbe sein, egal wie hoch der Prozentsatz ist. Gibt es eine Möglichkeit, die Animation bei bestimmten Prozentzahlen zu stoppen? Was ich hier suche, ist eine Hintergrundfarbe, die durch die Breite des Balkens ausgelöst wird. Wenn der Balken 50% lang ist, sollte es die 50% Hintergrundfarbe sein und an diesem Punkt aufhören. Das Gleiche gilt für 25% oder 75%.

Ich bin nicht auf der Suche nach einer Javascript Lösung, aber ich bin bereit zu kompromittieren, wenn das die einzige mögliche Methode ist.

Quelle

2017-03-29 Marques Dae

der Animation Keyframe Prozentsatz auf den Keyframe Fortschritt bezieht und nicht der berechnete Wert von Ihre CSS-Eigenschaften (in diesem Fall die Breite). Ist die Breite immer 400px? Und wären die Farben statisch? Wenn ja, dann könnte diese Sache mit verschiedenen CSS-Klassen und Keyframes für die 5 verschiedenen Farben gelöst werden; Wenn die Antwort zu keiner der 2 Fragen nein ist, dann wäre ein ordentliches bisschen Javascript für die Lösung erforderlich. –

Die Breite wird immer 400px sein und ja, die Farben sind größtenteils statisch. Die Animation, die ich habe, lässt sie jedoch von einer Farbe zur nächsten übergehen, so dass Rot zu Orange, Orange zu Gelb usw. verschmilzt. Ich hoffe, dass das hilft. In diesem Fall könnten Sie vielleicht ein Beispiel für die Einrichtung der Klassen geben und Keyframes geeignet? –

Ich bin mir ziemlich sicher, dass Sie nicht eine Animation die Art und Weise zu stoppen, die Sie fordern. Mein bester Vorschlag wäre, für jedes Prozent mehr Varianten zu erstellen, Klassennamen verwenden, anstatt ids, etwa so:

.progress-bar { 
 
    position: relative;  
 
    border-radius: 3px; 
 
    width: 400px; 
 
} 
 

 
.progress-bar-5 {  
 
    animation: color-bar-5 2s, animate-bar-5 2s; 
 
    animation-fill-mode: forwards; 
 
} 
 
.progress-bar-25 {  
 
    animation: color-bar-25 2s, animate-bar-25 2s; 
 
    animation-fill-mode: forwards; 
 
} 
 
.progress-bar-50 {  
 
    animation: color-bar-50 2s, animate-bar-50 2s; 
 
    animation-fill-mode: forwards; 
 
} 
 
.progress-bar-75 {  
 
    animation: color-bar-75 2s, animate-bar-75 2s; 
 
    animation-fill-mode: forwards; 
 
} 
 
.progress-bar-100 {  
 
    animation: color-bar-100 2s, animate-bar-100 2s; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@keyframes color-bar-5 { 
 
    100% { background-color: red;} 
 
} 
 

 
@keyframes color-bar-25 { 
 
    20% { background-color: red;} 
 
    100% { background-color: orange;} 
 
} 
 

 
@keyframes color-bar-50 { 
 
    10% { background-color: red;} 
 
    50% { background-color: orange;} 
 
    100% { background-color: yellow;} 
 
} 
 

 
@keyframes color-bar-75 { 
 
    7% { background-color: red;} 
 
    33% { background-color: orange;} 
 
    67% { background-color: yellow;} 
 
    100% { background-color: green;} 
 
} 
 

 
@keyframes color-bar-100 { 
 
    5% { background-color: red;} 
 
    25% { background-color: orange;} 
 
    50% { background-color: yellow;} 
 
    75% { background-color: green;} 
 
    100% { background-color: blue;} 
 
} 
 

 
@keyframes animate-bar-5 { 
 
    from {width: 0px; } 
 
    to {width: 10px; } 
 
} 
 

 
@keyframes animate-bar-25 { 
 
    from {width: 0px; } 
 
    to {width: 50px; } 
 
} 
 

 
@keyframes animate-bar-50 { 
 
    from {width: 0px; } 
 
    to {width: 100px; } 
 
} 
 

 
@keyframes animate-bar-75 { 
 
    from {width: 0px; } 
 
    to {width: 150px; } 
 
} 
 

 
@keyframes animate-bar-100 { 
 
    from {width: 0px; } 
 
    to {width: 200px; } 
 
}

<div class="progress"> 
 
    <div class="progress-title"><span>SKILL NAME</span></div> 
 
    <div class="progress-bar progress-bar-50"><span>50%</span></div> 
 
</div> 
 

 
<div class="progress"> 
 
    <div class="progress-title"><span>SKILL NAME</span></div> 
 
    <div class="progress-bar progress-bar-25"><span>25%</span></div> 
 
</div> 
 

 
<div class="progress"> 
 
    <div class="progress-title"><span>SKILL NAME</span></div> 
 
    <div class="progress-bar progress-bar-75"><span>75%</span></div> 
 
</div>

Quelle

2017-03-29 21:02:04 JDB

Ah danke! Ich denke, genau das hat Raj Nathani vorgeschlagen. Dies scheint definitiv viel besser zu sein, und es ist genau das, was ich suchte! –

Javascript würde es viel einfacher machen. aber ich begann mit dem CSS zu spielen, und irgendwie Fortschritte gemacht. Ich muss jetzt nach Hause gehen, damit ich es nicht beenden kann. https://jsfiddle.net/L9bznjLb/

@keyframes color-bar { 
    from {width: 0px; } 
    to {width: 20px; }

Quelle

2017-03-29 20:42:59

Ende Keyframe-Animation mit CSS3

Antwort

Verwandte Themen