CODEWITHSUNDEEP
css
8BitSigdom
8BitSigdom

Reputation: 116

css animate rotate svg image 90 degress and stop

How do I animate a image from top left to 90 degress and then stop the animation.

.sub-page-logo img {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 300px;
    animation-name: spin;
    animation-duration: 1000ms;
    
    animation-timing-function: linear;

}
@keyframes spin { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(90deg); 
        }
    }

Upvotes: 0

Views: 232

Answers (2)

YourBrainEatsYou
YourBrainEatsYou

Reputation: 1049

I assume that after the animation finishes, the logo jumps back to 0deg. You should be able to fix that, if you add: transform: rotate(90deg); to your .sub-page-logo img like so:

.sub-page-logo img{
 ...
 transform: rotate(90deg);
}

Upvotes: 1

Sergio Escudero
Sergio Escudero

Reputation: 1894

I think you want to keep the final state of the animations for your element.

MDN definition (https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode):

The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution.

.sub-page-logo img {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 300px;
    animation-name: spin;
    animation-duration: 1000ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards; //<--- THIS

}
@keyframes spin { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(90deg); 
        }
    }

Upvotes: 1

Related Questions