CSS Animierte Häkchen

Question

Ich möchte eine animierte Häkchen-CSS (Animation Zeichnung des Häkchens mit SVG-Animation), ich habe versucht, wie der folgende Code, aber es funktioniert nicht.Was mache ich?

DEMO:https://jsfiddle.net/b7Ln0jns/

CSS:

@import "bourbon"; 

$color--green: #7ac142; 
$curve: cubic-bezier(0.650, 0.000, 0.450, 1.000); 

.checkmark__circle { 
    stroke-dasharray: 166; 
    stroke-dashoffset: 166; 
    stroke-width: 2; 
    stroke-miterlimit: 10; 
    stroke: $color--green; 
    fill: none; 
    animation: stroke .6s $curve forwards; 
} 

.checkmark { 
    width: 56px; 
    height: 56px; 
    border-radius: 50%; 
    display: block; 
    stroke-width: 2; 
    stroke: #fff; 
    stroke-miterlimit: 10; 
    margin: 10% auto; 
    box-shadow: inset 0px 0px 0px $color--green; 
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; 
} 

.checkmark__check { 
    transform-origin: 50% 50%; 
    stroke-dasharray: 48; 
    stroke-dashoffset: 48; 
    animation: stroke .3s $curve .8s forwards; 
} 

@keyframes stroke { 
    100% { 
    stroke-dashoffset: 0; 
    } 
} 

@keyframes scale { 
    0%, 100% { 
    transform: none; 
    } 
    50% { 
    transform: scale3d(1.1, 1.1, 1); 
    } 
} 

@keyframes fill { 
    100% { 
    box-shadow: inset 0px 0px 0px 30px $color--green; 
    } 
} 

JS:

<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg> 

Answer 1

Werfen Sie einen Blick auf diese DEMO - Da Sie eine CSS-Datei verwenden, müssen Sie wandle den scss in css um.

Aktualisiert CSS:

.checkmark__circle { 
    stroke-dasharray: 166; 
    stroke-dashoffset: 166; 
    stroke-width: 2; 
    stroke-miterlimit: 10; 
    stroke: #7ac142; 
    fill: none; 
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; 
} 

.checkmark { 
    width: 56px; 
    height: 56px; 
    border-radius: 50%; 
    display: block; 
    stroke-width: 2; 
    stroke: #fff; 
    stroke-miterlimit: 10; 
    margin: 10% auto; 
    box-shadow: inset 0px 0px 0px #7ac142; 
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; 
} 

.checkmark__check { 
    transform-origin: 50% 50%; 
    stroke-dasharray: 48; 
    stroke-dashoffset: 48; 
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; 
} 

@keyframes stroke { 
    100% { 
    stroke-dashoffset: 0; 
    } 
} 
@keyframes scale { 
    0%, 100% { 
    transform: none; 
    } 
    50% { 
    transform: scale3d(1.1, 1.1, 1); 
    } 
} 
@keyframes fill { 
    100% { 
    box-shadow: inset 0px 0px 0px 30px #7ac142; 
    } 
} 

HTML

<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"> 
    <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/> 
    <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/> 
</svg> 

SASS & SCSS Info:

Sass ist eine Erweiterung von CSS3, verschachtelte Regeln hinzufügen, Variablen, Mixins, Wahl Vererbung und Mehr. Es wird mit dem Befehlszeilentool oder einem Web-Framework-Plugin in gut formatiertes Standard-CSS übersetzt.

Sass hat zwei Syntaxen. Die neue Hauptsyntax (ab Sass 3) wird als "SCSS" (für "Sassy CSS") bezeichnet und ist eine Obermenge der CSS3-Syntax. Dies bedeutet, dass jedes gültige CSS3-Stylesheet ebenfalls als SCSS gültig ist. SCSS-Dateien verwenden die Erweiterung .scss.

Die zweite, ältere Syntax wird als eingerückte Syntax (oder einfach "Sass") bezeichnet. Inspiriert von Hamls Knappheit ist es für Leute gedacht, die Prägnanz gegenüber Ähnlichkeit mit CSS bevorzugen. Anstelle von Klammern und Semikolons wird die Einrückung von Zeilen zum Angeben von Blöcken verwendet. Obwohl nicht mehr die primäre Syntax, wird die eingerückte Syntax weiterhin unterstützt. Dateien in der eingerückten Syntax verwenden die Erweiterung .sass.