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

Question

I'm creating a simple checkbox override in CSS and am trying to add an animation to make it appear. Because the checkmark is just a rotated rectangle with borders on the bottom and side, when I animate it, it isn't actually rotated until after the animation is complete. I tried adding the transform:rotate() to the animation keyframes, but for some reason when I do that, it doesn't animate at all. How can I ensure that the checkmark remains rotated 45º throughout the animation process, and after it completes?
Demo: 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
$color-success: #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

Put your rotation inside your keyframe (do this for both webkit and normal):
#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;
}
}
The :after should also have the rotate applied:
.checkbox + label:after {
...
transform: rotate(45deg);
}
fiddle: https://jsfiddle.net/L09h7jng/4/

Answer 2

try to put rotate(45deg) to each line of all transform in animation progress...
#-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;
}
}