Hinzufügen animierten Kontrollkästchen zu Bootstrap Formular-Check

Question

Ich bin wirklich schlecht mit CSS-Animationen, aber ich fand diese große animierte Häkchen auf SO, die ich gerne in meinem Code verwenden würde. Aber ich weiß nicht, wie es schließen in

Dies ist mein HTML-Code für Haken, ich bin mit Bootstrap. 4:

<div class="form-check"> 
    <label class="custom-control custom-checkbox mb-0"> 
    <input type="checkbox" class="custom-control-input"> 
    <span class="custom-control-indicator"></span> 
    <span class="custom-control-description">checkmark</span> 
    </label> 
</div> 

Und hier ist das animierte Häkchen Fiddle.

Kann mir bitte jemand sagen, wie ich das in meinen HTML-Code aufnehmen kann?

Vielen Dank im Voraus.

Answer 1

Versuchen Sie wie folgt.

JS Fiddle

.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: 12px; 
 
    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; 
 
    } 
 
} 
 

 
input[type=checkbox] { 
 
    display: none; 
 
} 
 

 
input[type=checkbox]+svg { 
 
    display: none; 
 
} 
 

 
input[type=checkbox]:checked+svg { 
 
    display: block; 
 
} 
 

 
.check-box { 
 
    position: relative; 
 
} 
 

 
.check-box label { 
 
    display: flex; 
 
    height: 80px; 
 
    align-items: center; 
 
    justify-content: left; 
 
    padding-left: 88px; 
 
} 
 

 
.check-box label svg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<form> 
 
    <div class="check-box"> 
 
    <label> 
 
     <input type="checkbox" name="item_1" value="item 1" /> 
 
     <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> 
 
     <span>Item 1</span> 
 
    </label> 
 
    </div> 
 

 
    <div class="check-box"> 
 
    <label> 
 
     <input type="checkbox" name="item_2" value="item 2" /> 
 
     <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> 
 
     <span>Item 2</span> 
 
    </label> 
 
    </div> 
 

 

 
</form>