Animation: jelly doesn't work - css

Question

I've tried to create a button that animates to the left, and then back ti the right again, to it's normal state. Animation doesn't work with this code:
.fortnite-wrapper .btn.btn-display:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2em;
background-color: #ff0;
-webkit-transition: background-color .3s ease-in-out;
-o-transition: background-color .3s ease-in-out;
transition: background-color .3s ease-in-out;
-webkit-box-shadow: 0 4px 12px -4px rgba(0,0,0,.5);
box-shadow: 0 4px 12px -4px rgba(0,0,0,.5);
-webkit-animation: jelly 6s ease-in-out infinite;
animation: jelly 6s ease-in-out infinite;
-webkit-transform-origin: 50% 50% 20px;
-ms-transform-origin: 50% 50% 20px;
transform-origin: 50% 50% 20px;
}
Left side of the button should expand to the left for 20 px and then go back, animation is infinite.
HTML for button:
<div class="fortnite-wrapper">
<button class="btn download-button btn-primary btn-display play-free">
<span>Fortnite</span></button>
</div>

Answer 1

First off, you didn't define the animation jelly, which is needed to tell the element which properties to animate.
Secondly, animation-direction: alternate makes the animation reverse itself after completion. This is neccessary in order to keep the element from jumping back to the start. In this snippet I put it into animation: jelly 2s ease-in-out infinite alternate;.
.fortnite-wrapper {
position: relative;
width: 200px;
}
.fortnite-wrapper .btn.btn-display:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 2em;
background-color: #ff0;
-webkit-transition: background-color .3s ease-in-out;
-o-transition: background-color .3s ease-in-out;
transition: background-color .3s ease-in-out;
-webkit-box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5);
box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5);
-webkit-animation: jelly 2s ease-in-out infinite alternate;
animation: jelly 2s ease-in-out infinite alternate;
-webkit-transform-origin: 50% 50% 20px;
-ms-transform-origin: 50% 50% 20px;
transform-origin: 50% 50% 20px;
}
#keyframes jelly {
0 {
width: 100%;
}
100% {
width: calc(100% - 20px);
}
}
<div class="fortnite-wrapper">
<button class="btn download-button btn-primary btn-display play-free">
<span>Fortnite</span></button>
</div>
Edit: In order for the animation to only affect the left side of the block without changing the rest of it, I recommend animating the property width instead. If you use it in combination with position: absolute and right: 0 the element will in- and decrease in size on the left side.

Answer 2

.outer {
margin: 50px;
}
.button {
border: 1px solid black;
border-radius: 3px;
width: 100px;
height: 30px;
display: block;
background: linear-gradient(to right, black 50%, white 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all .5s ease-out;
}
.button:hover {
background-position: left bottom;
}
.text {
text-align: center;
font-size: 16px;
line-height: 30px;
color: black;
transition: all .6s ease-out;
display: block;
}
.text:hover {
color: white;
}
<div class="outer">
<div class="button">
<div class="text">button</div>
</div>
</div>