Chceckbox：选中的动画仅是第一次出现延迟

Question

我想创建纯CSS动画复选框。一切都很好，除了当我用复选框加载页面并且具有伪类：checked的那一刻。当我第一次取消选中它时，动画（BounceIn）太迟了。

我尝试使用过渡，但效果是相同的。

.checkbox {
  cursor: pointer;
  position: relative;
}

.checkbox .icon {
  color: #fff;
  left: 0;
  position: absolute;
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  top: 0;
}

.checkbox .icon {
  left: 0;
  position: absolute;
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  top: 0;
}

.checkbox input[type="checkbox"]:checked+.input__row .icon,
.checkbox input[type="checkbox"]:checked .icon {
  stroke-dashoffset: 0;
}

.checkbox input[type="checkbox"]:focus:checked+.input__row .icon {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.15s ease-out 0.25s;
}

.checkbox input[type="checkbox"]:focus:not(:disabled)+div .checkbox__field,
.checkbox input[type="checkbox"]:hover:not(:disabled)+div .checkbox__field {
  border: 2px solid #4680fe;
  box-shadow: 0 1px 1px rgba(70, 128, 254, 0.1);
}

.checkbox--compact .checkbox__anims,
.checkbox--compact .checkbox__field,
.checkbox--compact .checkbox__toggle .icon {
  height: 18px;
  width: 18px;
}

.checkbox--disabled {
  cursor: not-allowed;
}

.checkbox--disabled input[type="checkbox"] {
  pointer-events: none;
}

.checkbox.checkbox--compact input[type="checkbox"]:checked+.input__row .checkbox__anims .checkbox__anims-el {
  transform-origin: 12px 1px;
}

.checkbox.checkbox--disabled input[type="checkbox"]:not(:checked)+.input__row .checkbox__field {
  background-color: rgba(70, 128, 254, 0.1);
  border-color: rgba(70, 128, 254, 0.2);
}

.checkbox.checkbox--disabled .checkbox__field,
.checkbox.checkbox--disabled .icon {
  opacity: 0.5;
}

.checkbox:not(.checkbox--disabled) input[type="checkbox"]:checked+.input__row .checkbox__anims .checkbox__anims-el {
  left: 0;
  margin: -1px 0 0 -4px;
  position: absolute;
  top: 50%;
  transform-origin: 16px 1px;
}

.checkbox:not(.checkbox--disabled) input[type="checkbox"]:checked+.input__row .checkbox__anims .checkbox__anims-el:after {
  content: "";
  display: block;
  height: 2px;
  opacity: 0.4;
  transform: translateX(0) scaleX(0);
  transform-origin: left center;
  width: 4px;
}

.checkbox:not(.checkbox--disabled) input[type="checkbox"]:checked+.input__row .checkbox__anims .checkbox__anims-el:first-child {
  transform: rotate(45deg);
}

.checkbox:not(.checkbox--disabled) input[type="checkbox"]:checked+.input__row .checkbox__anims .checkbox__anims-el:nth-child(2) {
  transform: rotate(135deg);
}

.checkbox:not(.checkbox--disabled) input[type="checkbox"]:checked+.input__row .checkbox__anims .checkbox__anims-el:nth-child(3) {
  transform: rotate(225deg);
}

.checkbox:not(.checkbox--disabled) input[type="checkbox"]:checked+.input__row .checkbox__anims .checkbox__anims-el:nth-child(4) {
  transform: rotate(315deg);
}

.checkbox:not(.checkbox--disabled) input[type="checkbox"]:checked+.input__row .checkbox__field {
  animation: elementBounceIn .6s ease 0ms 1 forwards;
}

.checkbox:not(.checkbox--disabled) input[type="checkbox"]:focus:checked+.input__row checkbox__anims .checkbox__anims-el:after {
  animation: linesScaleIn .4s ease .1s 1 forwards;
}

.checkbox__anims {
  display: block;
  height: 24px;
  left: 0;
  position: absolute;
  top: 0;
  width: 24px;
}

.checkbox__anims .checkbox__anims-el:after,
.checkbox input[type="checkbox"]:checked+.input__row .checkbox__field {
  background-color: #4680fe;
}

.checkbox__field {
  border: 2px solid rgba(70, 128, 254, 0.4);
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(70, 128, 254, 0.1);
  box-sizing: border-box;
  height: 24px;
  position: relative;
  width: 24px;
}

.checkbox__toggle {
  position: relative;
}

.icon {
  display: inline-block;
  fill: currentColor;
  height: 24px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-width: 0;
  transition: stroke 0.25s linear, fill 0.25s linear;
  width: 24px;
}

.icon--fill-none {
  fill: none;
}

.icon--stroke-width-primary {
  stroke-width: 2px;
}

.input--hidden {
  cursor: inherit;
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  pointer-events: all;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.input__row {
  display: flex;
  height: 100%;
  width: 100%;
}

@keyframes elementBounceIn {
  0% {
    transform: matrix(0, 0, 0, 0, 0, 0);
  }
  5.81% {
    transform: matrix(0.483, 0, 0, 0.483, 0, 0);
  }
  11.61% {
    transform: matrix(0.88, 0, 0, 0.88, 0, 0);
  }
  17.42% {
    transform: matrix(1.09, 0, 0, 1.09, 0, 0);
  }
  23.12% {
    transform: matrix(1.142, 0, 0, 1.142, 0, 0);
  }
  30.33% {
    transform: matrix(1.098, 0, 0, 1.098, 0, 0);
  }
  37.44% {
    transform: matrix(1.033, 0, 0, 1.033, 0, 0);
  }
  44.54% {
    transform: matrix(0.994, 0, 0, 0.994, 0, 0);
  }
  51.65% {
    transform: matrix(0.984, 0, 0, 0.984, 0, 0);
  }
  80.28% {
    transform: matrix(1.002, 0, 0, 1.002, 0, 0);
  }
  to {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}

@keyframes linesScaleIn {
  0% {
    transform: translateX(0) scaleX(0)
  }
  50% {
    transform: translateX(-12px) scaleX(2)
  }
  51% {
    transform: translateX(-12px) scaleX(2)
  }
  to {
    transform: translateX(-12px) scaleX(0)
  }
}

<div class="input checkbox">
  <input type="checkbox" class="input--hidden" checked>

  <div class="input__row">
    <div class="checkbox__toggle">
      <span class="checkbox__anims-el"></span>
      <span class="checkbox__anims-el"></span>
      <span class="checkbox__anims-el"></span>
      <span class="checkbox__anims-el"></span>
    </div>
    <div class="checkbox__field"></div>
    <svg class="icon icon__tick icon--ot" viewBox="0 0 24 24">
        <title>tick</title>
        <polyline class="icon--fill-none icon--stroke-width-primary"
                  points="6.34 11.29 10.59 15.54 17.66 8.46"></polyline>
      </svg>
  </div>
  <div class="input__label-wrapper">
    <div class="label">Uncheck it and see</div>
  </div>
</div>

https://codepen.io/piokrako/pen/rELvdd?editors=1100

.checkbox:not(.checkbox--disabled) input[type="checkbox"]:focus:checked + .input__row .checkbox__field { animation: elementBounceIn .6s ease 0ms 1 forwards; }