Search code examples
csscss-animationsbox-shadowcakeyframeanimation

CSS - remove box shadow with keyframes animation

I have an icon that initially has a box shadow set. I am animating the icon and scaling it, but I would also like to remove the shadow while I am doing it. I have tried it like this:

.loading-icon { 
    width: 80px;
    height: 80px;
    animation-name: earth;
    animation-timing-function: ease-in-out;
    animation-duration: 3s;
}
@keyframes earth {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.5) { box-shadow: none; };
    }
}

But, this is not working, how can I do that?

Solution

  • In keyframes you've extra {} surrounding box-shadow which is not needed.

    @keyframes earth {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.5);
        box-shadow: none;
    }
}