Inline CSS image transition - html

Question

I would like to achieve the following effect: below CSS, on hover, does a "slot machine effect" that rolls the icon in a vertical carousel (please see the css below for details).
Due to restrictions of hosting that I am using for my website, I cannot use any external library of icons, so I would like to achieve the same effect, pasting the css into the header and using it with an img tag in HTML.
Could you please help me trim this css so that it will actually work with my image?
Thank you for all your forbearance and help.
-webkit-transition:all .3s;
-o-transition:all .3s;
transition:all .3s
}
.btn.social_share:hover .social-media-share-buttons-icon:before {
top: 40px;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s
}
.btn.social_share:hover .social-media-share-buttons-icon:after {
top: 0;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s
}
.btn.social_share:active {
text-decoration: none!important;
-webkit-touch-callout: none
}
.btn.social_share:active .social-media-share-buttons-icon {
background-color: rgba(0, 0, 0, .2);
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s
}
.btn.social_share:active .social-media-share-buttons-icon:before {
top: 40px;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s
}
.btn.social_share:active .social-media-share-buttons-icon:after {
top: 0;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s
}
.btn.social_share.facebook .social-media-share-buttons-icon:after,
.btn.social_share.facebook .social-media-share-buttons-icon:before {
content: "\e63f"
}
.btn.social_share.linkedin .social-media-share-buttons-icon:after,
.btn.social_share.linkedin .social-media-share-buttons-icon:before {
content: "\e631"
}
.btn.social_share.twitter .social-media-share-buttons-icon:after,
.btn.social_share.twitter .social-media-share-buttons-icon:before {
content: "\e640"
}
#-moz-keyframes fadeBottom {
0% {
opacity: 0;
-ms-transform: translateY(10%);
-webkit-transform: translateY(10%);
transform: translateY(10%)
}
100% {
opacity: 1;
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
#-webkit-keyframes fadeBottom {
0% {
opacity: 0;
-ms-transform: translateY(10%);
-webkit-transform: translateY(10%);
transform: translateY(10%)
}
100% {
opacity: 1;
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
#-o-keyframes fadeBottom {
0% {
opacity: 0;
-ms-transform: translateY(10%);
-webkit-transform: translateY(10%);
transform: translateY(10%)
}
100% {
opacity: 1;
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
As requested, also adding the HTML snippet, which currently is not working with above css:
<div style="padding: 30px 0; padding-left: 0px; margin-left: 0px; margin-right: 0px; text-align: center">
<div class="col-xs-12">
<ul class="social-media-share-buttons">
<li>
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://www.mywebsite.com" class="btn btn-link social_share facebook" rel="nofollow" data-social_name="facebook" data-post_id="" data-social_type="share" data-location="inline">
<img class="social-media-share-buttons-icon" src="facebook_icon.png">
<div style="color: #fff; line-height: 2; font-weight: 700;">Facebook</div>
</a>
</li>

Answer 1

You don't need animations for that. Just use transitions and transforms and it works: Here some example:
ul {
text-align: center;
padding: 0;
}
li {
list-style-type: none;
}
a {
display: inline-block;
position: relative;
height: 40px;
background: #4456aa;
line-height: 40px;
overflow: hidden;
color: white;
text-decoration: none;
font-family: sans-serif;
border: 1px solid transparent;
transition: all 0.5s ease 0.5s;
}
a div {
padding: 0 30px;
}
a img {
transition: all ease 1s;
position: absolute;
top: 100%;
left: 0;
bottom: 0;
width: 30px;
margin: auto;
opacity: 0;
}
a:hover {
transition: all ease 0.5s;
}
a:hover {
background: #ffffff;
border: 1px solid #000000;
color: #000000;
}
a:hover img {
transition: all 0.5s ease 0.5s;
opacity: 1;
top: 0;
bottom: 0;
}
<ul class="social-media-share-buttons">
<li>
<a target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https://www.mywebsite.com"
class="btn btn-link social_share facebook"
rel="nofollow"
data-social_name="facebook"
data-post_id=""
data-social_type="share"
data-location="inline">
<img class="social-media-share-buttons-icon"
src="https://image.flaticon.com/icons/png/128/20/20837.png">
<div>Facebook</div>
</a>
</li>
</ul>

Answer 2

You may use pre-built CSS properties like transforms and transitions, maybe they make you independent of animations.