How to hover parent & have child respond to keyframe animation - css

Question

I am trying to write code that mimics this animation as much as possible.
I have been going over keyframe animations & I think that they can be used to do what I need them to do.
I effectively want to have three things happen when the user hovers over the parent element. The first is the color
on the right side of the element will change dynamically (as in the picture & as in the example code), the
icon will animate into the picture & then the text will then animate.
I am new to programming & I am looking for some direction.
Example of finished product: https://imgur.com/a/bxV1V1B
DEMO
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
a span {
position: relative;
z-index: 2;
}
a:after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 100%;
background: green;
transition: all .35s;
}
a:hover:after {
width: 15%;
}
<div class="wrapper">
<span>Hover Me!</span>
</div>

Answer 1

Here you go. I made a CSS animation for you which will rotate and translate a new i that I have added into the HTML. I used font awesome for the check with the circle around it. Take a look:
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
a span {
position: relative;
z-index: 2;
}
a:after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 100%;
background: green;
transition: all .35s;
visibility: hidden;
}
a:hover:after {
width: 15%;
visibility: visible;
}
#check {
right: 2px;
top: 8px;
position: absolute;
display: none;
z-index: 3;
transition: right .35s;
}
a:hover #check {
animation:spin .35s linear;
display: block;
}
#keyframes spin {
0% {
transform: translate(25px) rotate(0deg);
}
100% {
transform: translate(0px) rotate(360deg);
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<span>Hover Me!</span><i id="check"style="font-size:22px; color:lightgrey" class="fa fa-check-circle"></i>
</div>