transform-origin gives #keyframes animation unintended delay - html

Question

When I click the box and trigger this animation, it has a weird delay after the animation is played and before the top and bottom bar get to their desired end positions. I assume this is because of the transform-origin but not so sure. How can I make the animation to run smooth?
.box{
width: 200px; height: 200px;
background-color: #2C3E50;
float:left; margin: 20px;
}
.box label{
display: block;
width: 50px; margin: auto;
height: 50px;
transform: translateY(80px);
text-align: center;
}
.box span{
display: block;
width: 50px; height: 5px;
background-color: #fff;
margin-bottom: 10px;
border-radius: 5px;
}
input{display: none;}
input:checked+label span{ animation-play-state: running;}
#bars02:checked+label span{
animation-play-state: running;
transition: .5s;
}
#bars02:checked+label span:nth-child(1){
animation: rotatePlus .5s forwards;
transform-origin: left bottom;
}
#bars02+label span{
animation-play-state: paused;
}
#keyframes rotatePlus{
0%{ transform:rotate(0); }
100%{ transform: rotate(35deg); }
}
#bars02:checked+label span{
animation-play-state: running;
transition: .5s;
}
#bars02:checked+label span:nth-child(3){
transform-origin: left top;
animation: rotateMinus .5s forwards;
}
#bars02:checked+label span:nth-child(2){
animation: opacity .5s forwards;
}
#keyframes rotateMinus{
0%{ transform:rotate(0); }
100%{ transform: rotate(-35deg); }
}
<div class="box">
<input type="checkbox" id="bars02">
<label for="bars02">
<span></span>
<span></span>
<span></span>
</label>
</div>

Answer 1

It seems to be a Chrome bug. You can simplify your code like below and set the transform-origin initially
.box {
width: 200px;
height: 200px;
background-color: #2C3E50;
float: left;
margin: 20px;
}
.box label {
display: block;
width: 50px;
margin: auto;
height: 50px;
transform: translateY(80px);
text-align: center;
}
.box span {
display: block;
width: 50px;
height: 5px;
background-color: #fff;
margin-bottom: 10px;
border-radius: 5px;
transition: .5s;
}
input {
display: none;
}
label span:nth-child(1) {
transform-origin: left bottom;
}
label span:nth-child(3) {
transform-origin: left top;
}
#bars02:checked+label span:nth-child(1) {
transform: rotate(35deg);
transform-origin: left bottom;
}
#bars02:checked+label span:nth-child(3) {
transform-origin: left top;
transform: rotate(-35deg);
}
<div class="box">
<input type="checkbox" id="bars02">
<label for="bars02">
<span></span>
<span></span>
<span></span>
</label>
</div>