CSS 旋转的对象直到动画完成后才旋转

Question

我正在 CSS 中创建一个简单的复选框覆盖，并尝试添加动画以使其出现。因为复选标记只是一个底部和侧面有边框的旋转矩形，所以当我为它设置动画时，它实际上并没有旋转，直到动画完成。我尝试将 transform:rotate() 添加到动画关键帧，但出于某种原因，当我这样做时，它根本没有动画。 如何确保复选标记在整个动画过程中和完成后保持旋转 45º？

演示：https://jsfiddle.net/brandonscript/L09h7jng/

HTML

<h3>Checkboxes</h3>
<div>
  <input id="checkbox-1" class="checkbox" name="checkbox-1" type="checkbox" checked>
  <label for="checkbox-1" class="checkbox-label">First Choice</label>
</div>

(S)CSS

$颜色成功：#12C376；

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale(.25);
    opacity: .8;
  }
  50% {
    -webkit-transform: scale(1.4);
    opacity: .25;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: .8;
  }
}

@keyframes bounce {
  0% {
    transform: scale(.25);
    opacity: .8;
  }
  50% {
    transform: scale(1.4);
    opacity: 1.4;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.checkbox {
  position: absolute;
  display: none;
}

.checkbox + label {
  position: relative;
  display: block;
  padding-left: 30px;
  cursor: pointer;
  vertical-align: middle;
}

.checkbox + label:hover:before {
  animation-duration: 0.4s;
  animation-fill-mode: both;
  animation-name: hover-color;
}

.checkbox + label:before {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
  content: '';
  border: 1px solid $color-piston;
}

.checkbox + label:after {
  position: absolute;
  display: none;
  content: '';
}

.checkbox:checked + label:before {
  //animation-name: none;
}

.checkbox:checked + label:after {
  display: block;
}

.checkbox + label:before {
  border-radius: 3px;
}

.checkbox + label:after {
  top: 2px;
  left: 7px;
  box-sizing: border-box;
  width: 6px;
  height: 12px;
  border-width: 2px;
  border-style: solid;
  border-color: $color-success;
  border-top: 0;
  border-left: 0;
  transition: all .2s;
  -webkit-animation: bounce 0.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forward;
  -moz-animation: bounce 0.3s;
  -moz-animation-iteration-count: 1;
  -moz-animation-fill-mode: forward;
  animation: bounce 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: forward;
  transform: rotate(45deg);
}

.checkbox:checked + label:before {
  border: 1px solid $color-piston;
  background: #FFFFFF;
}

Answer 1

将旋转放在关键帧内（对 webkit 和正常都这样做）：

@keyframes bounce {
  0% {
    transform: scale(.25) rotate(15deg);
    opacity: .8;
  }
  50% {
    transform: scale(1.4);
    opacity: 1.4;
  }
  100% {
    transform: scale(1) rotate(45deg);
    opacity: 1;
  }
}

:after 也应该应用旋转：

.checkbox + label:after {
  ...
  transform: rotate(45deg);
}

fiddle: https://jsfiddle.net/L09h7jng/4/

Answer 2

尝试将 rotate(45deg) 到动画进程中所有变换的每一行...

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale(.25) rotate(45deg);
    opacity: .8;
  }
  50% {
    -webkit-transform: scale(1.4) rotate(45deg);
    opacity: 1.4;
  }
  100% {
    -webkit-transform: scale(1) rotate(45deg);
    opacity: 1;
  }
}

@keyframes bounce {
  0% {
    transform: scale(.25) rotate(45deg);
    opacity: .8;
  }
  50% {
    transform: scale(1.4) rotate(45deg);
    opacity: 1.4;
  }
  100% {
    transform: scale(1) rotate(45deg);
    opacity: 1;
  }
}

CSS 旋转的对象直到动画完成后才旋转

CSS rotated object doesn't rotate until after animation is complete

html

css

keyframe

css-animations

HTML

(S)CSS