Having issues with CSS animation.
I am trying to get the small plus icon to rotate/spin in the center and stop once it is completed. Currently, the animation works fine but after it finishes, the icon shifts to the bottom and right.
.link {
position: relative;
display: block;
width: 150px;
height: 150px;
}
.link:after {
position: absolute;
top: 0%;
left: 0%;
background: blue;
content: '';
visibility: hidden;
height: 100%;
opacity: 0;
transition: opacity 280ms ease-in-out;
width: 100%;
}
.link:hover:after {
visibility: visible;
opacity: .6;
}
.link:hover:before {
position: absolute;
top: 50%;
left: 50%;
-webkit-animation: spin-plus 500ms 1;
animation: spin-plus 500ms 1;
color: white;
content: '\f067';
display: inline-block;
font-family: 'FontAwesome';
font-size: 1.750rem;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
z-index: 10;
}
@keyframes spin-plus {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg);
}
}<a href="#" class="link">
<img src="http://via.placeholder.com/150x150" class="image" />
</a>Tried various solutions without success. Out of ideas now