strange keyframes setting in CSS animation - css

Question

Inspired by this tutorial http://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/ I decided to make pure css version of similar effect.
And it looks good and work pretty smooth. What bothers me is why after few attempts I had to set keyframes at 24% and 74% instead of 50%? With 50% animation looks choppy. I really don't like to do things blindfolded, so I'll be grateful for help.
Here is quick dirty implementation:
html {
background: #ccc;
}
.card {
position: relative;
display: inline-block;
height: 400px;
width: 200px;
background: #000;
margin: 50px;
overflow: hidden;
}
.card-head {
position: absolute;
background: #000;
height: 400px;
width: 400px;
border-radius: 50%;
left: -100px;
top: -173px;
z-index: 10;
-webkit-animation-name: carda;
animation-name: carda;
}
.card-extend {
position: absolute;
background: #fff;
height: 400px;
width: 400px;
bottom: -200px;
left: -100px;
z-index: 5;
-webkit-animation-name: cardb;
animation-name: cardb;
}
.card-animated {
-webkit-animation-duration: .2s;
animation-duration: .2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out;
}
.card:hover .card-head,
.card:focus .card-head{
-webkit-animation-name: cardhovera;
animation-name: cardhovera;
}
.card:hover .card-extend,
.card:focus .card-extend{
-webkit-animation-name: cardhoverb;
animation-name: cardhoverb;
}
#-webkit-keyframes carda {
from {
border-radius: 0%;
top: -320px;
z-index: 2;
}
24% {
top: -320px;
border-radius: 25%;
z-index: 2;
}
to {
border-radius: 50%;
top: -173px;
}
}
#keyframes carda {
from {
border-radius: 0%;
top: -320px;
z-index: 2;
}
24% {
top: -320px;
border-radius: 25%;
z-index: 2;
}
to {
border-radius: 50%;
top: -173px;
}
}
#-webkit-keyframes cardhovera {
from {
border-radius: 50%;
top: -173px;
}
76% {
top: -320px;
border-radius: 25%;
z-index: 2;
}
to {
border-radius: 0%;
top: -320px;
z-index: 2;
}
}
#keyframes cardhovera {
from {
border-radius: 50%;
top: -173px;
}
76% {
top: -320px;
border-radius: 25%;
z-index: 2;
}
to {
border-radius: 0%;
top: -320px;
z-index: 2;
}
}
#-webkit-keyframes cardb {
from {
bottom: -53px;
border-radius: 50%;
}
76% {
bottom: -200px;
border-radius: 25%;
}
to {
border-radius: 0;
z-index: 5;
bottom: -200px;
}
}
#keyframes cardb {
from {
bottom: -53px;
border-radius: 50%;
}
76% {
bottom: -200px;
border-radius: 25%;
}
to {
border-radius: 0;
z-index: 5;
bottom: -200px;
}
}
#-webkit-keyframes cardhoverb {
from {
border-radius: 0;
z-index: 5;
bottom: -200px;
}
24% {
bottom: -200px;
border-radius: 25%;
}
to {
bottom: -53px;
border-radius: 50%;
}
}
#keyframes cardhoverb {
from {
border-radius: 0;
z-index: 5;
bottom: -200px;
}
24% {
bottom: -200px;
border-radius: 25%;
}
to {
bottom: -53px;
border-radius: 50%;
}
}
<div tabindex="0" class="card">
<div class="card-head card-animated">
</div>
<div class="card-extend card-animated">
</div>
</div>

Answer 1

I think this choppy effect you are talking about has more to do with the way animation in css work. As the easing is applied to the whole extension of it, this means, imagine some keyframes like this:
#keyframes exampleFrames {
0% {
transform: translateX(50px)
}
50% {
transform: translateX(0)
}
100% {
transform: translateX(50px)
}
}
Even though you can add easing to the animation the element affected will start at 50 pixels to the right and start moving to the left to it's initial position and in the center frame will suddenly change direction to get to the last position again. The issue is with this sudden change, this is what makes it choppy.
To avoid this you might need to use javascript or, as you've seen tweak the keyframes to minimise this undesirable visual effect.