复选框动画问题中的过渡延迟

Question

我找到了一个外观漂亮的按钮，并按照教程进行了制作。考虑到我的脑力和经验受到严重限制，我开始使用参数对其进行一些解构，并且大部分（！）成功地理解了它的工作原理。

我决定我希望尝试在“开机”设置中添加一个小的延迟，例如在检查后蓝灯点亮0.5秒钟之前，我似乎无法想办法。我尝试添加transition-duration: transition-delay:并使用它，但似乎无法弄清楚。这是代码：

    body {
    margin: 0;
    padding: 0;
    background: #292929;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

input[type="checkbox"] {
    position: relative;
    width: 120px;
    height: 40px;
    -webkit-appearance: none;
    background: linear-gradient(0deg, #333333, #000000);
    outline: none;
    border-radius: 20px;
    box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0, 0, 0, 1), 0 5px 20px rgba(0, 0, 0, .5), inset 0 0 15px rgba(0, 0, 0, .2);
}

input:checked[type="checkbox"] {
    background: linear-gradient(0deg, #6dd1ff, #20b7ff);
    box-shadow: 0 0 2px #6dd1ff, 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0, 0, 0, 1), 0 5px 20px rgba(0, 0, 0, .5), inset 0 0 15px rgba(0, 0, 0, .2);
}

input[type="checkbox"]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 40px;
    background: linear-gradient(0deg, #000000, #6b6b6b);
    border-radius: 20px;
    box-shadow: 0 0 0 1px #232323;
    transform: scale(.98, .96);
    transition: .5s;
}

input:checked[type="checkbox"]:before {
    left: 40px;
}

input[type="checkbox"]:after {
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    left: 65px;
    width: 4px;
    height: 4px;
    background: linear-gradient(0deg, #6b6b6b, #000000);
    border-radius: 50%;
    transition: .5s;
}

input:checked[type="checkbox"]:after {
    background: #63cdff;
    left: 105px;
    box-shadow: 0 0 5px #13b3ff, 0 0 15px #13b3ff;
}

我将代码放在这里：

input:checked[type="checkbox"] {
    background: linear-gradient(0deg, #6dd1ff, #20b7ff);
    box-shadow: 0 0 2px #6dd1ff, 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0, 0, 0, 1), 0 5px 20px rgba(0, 0, 0, .5), inset 0 0 15px rgba(0, 0, 0, .2);
}`