Check out my CSS below:
/* --------------------------
Base
--------------------------- */
body {
padding-top: 60px;
background: #0f4e7a;
}
svg {
margin: auto;
display: block;
width: 28%;
}
.star{
fill: #FFF;
}
/* --------------------------
Keyframes
--------------------------- */
@keyframes grow2 {
0% {
transform: scale(0.5);
opacity:0;
}
50% {
transform: scale(1.5);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity:1;
fill: #fdf097;
}
}
@keyframes rotate2 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
/* --------------------------
SVG Styles
--------------------------- */
.star * {
transform-origin: 50% 50%;
}
.star {
animation: grow2 1s forwards, rotate2 1s forwards;
transform-origin: center;
}
.star:hover {
animation: rotate2 1s ease-in forwards;
transform-origin: center;
}
Take a look at the HTML snippet:
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="218.8 226.8 258.4 258.3">
<clippath id="bg">
<circle cx="348" cy="356" r="129.2"/>
</clippath>
<g class="stars" clip-path="url(#bg)">
<circle class="stars-bg" fill="#3079AB" stroke="#95C7E8" stroke-width="6" stroke-linecap="round" cx="348" cy="356" r="129.2"/>
<path class="star" d="M409.7,337.4c-1.2-1-2.2-1.2-8.4-1c-3,0-6.9,0.2-11.9,0.5c-5.7,0.2-11.4,0.7-14.6,1
c-1.2-2.5-3.7-6.9-6.4-11.6c-6.9-11.6-9.9-15.3-11.6-17.1c-1.5-2-3.2-1.7-3.7-1.7h-0.2h-0.2c-0.5,0-2.5,0.5-3.2,2.7
c-1.2,2-3,6.4-6.2,19.5c-1.2,5.2-2.2,10.1-3...
I'm struggling to get the rotate and grow animations to work together properly, and when hovering over the element it seems to do the opposite of what I expect by growing instead of rotating. Any ideas on how to fix this issue would be greatly appreciated!