このCSSアニメーションのチェックボックスをどのようにスタイルするのですか？

Question

私は、このチェックボックスを持っているし、それが後に確認され、ビデオを見てください、このアニメーションを必要とします：https://www.youtube.com/watch?v=lUAccdEOrV8&feature=youtu.be

私は下のこのを試してみましたが、私はコーナーを丸めるために得ることができない、プラス、私は適用されていた不透明チェックボックスにも。

#subsDiv input[type="checkbox"]{ 
    appearance: none; 
    background-color: transparent; 
    border: 1px solid white; 
    padding: 12px; 
    border-radius: 6px; 
    display: inline-block; 
    vertical-align: top; 
    margin-left: 0px; 
    outline: none; 
} 

#subsDiv input[type="checkbox"]:hover { 
    border-color: #609de6; 
} 

#subsDiv input[type="checkbox"]:checked { 
    outline: none; 
    background-position: 0px -24px; 
    background-image: url(../img/check.png); 
    border-color: #4a90e2; 
    animation-name: checkbox; 
    animation-duration: 400ms; 
} 


@keyframes checkbox { 
    from{opacity: 1 ;outline: 2px solid #4a90e2; outline-offset: 0px;} 
    to{opacity: 0 ;outline: 2px solid #4a90e2; outline-offset: 10px;} 
} 

Answer 1

あなたが/]チェックボックスをオンにクリックしたときに出て爆発少しボーダー効果を作成するために、擬似的背景を移行要素、不透明度、およびtransform: scale()でこれを行うことができます。

.cbl { 
 
    display: block; 
 
    cursor: pointer; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    position: relative; 
 
    transition: background .5s; 
 
} 
 
.cb { 
 
    display: none; 
 
} 
 
.cb:checked + .cbl { 
 
    background: blue; 
 
} 
 
.cb:checked + .cbl::after { 
 
    content: '\2713'; 
 
    color: white; 
 
} 
 
.cbl::before { 
 
    content: ''; 
 
    position: absolute; 
 
} 
 
.cbl, .cbl::before { 
 
    width: 1em; height: 1em; 
 
    border-radius: .25em; 
 
    border: 1px solid blue; 
 
} 
 
.cb:checked + .cbl::before { 
 
    transform: scale(2); 
 
    opacity: 0; 
 
    transition: transform .5s, opacity .5s; 
 
}

<input type="checkbox" class="cb" id="cb"> 
 
<label class="cbl" for="cb"></label>