Блог

Главная - Вопросы по программированию - css анимация поворот svg изображения на 90 градусов и остановка

css анимация поворот svg изображения на 90 градусов и остановка

#css

Вопрос:

Как анимировать изображение слева вверху до 90 градусов, а затем остановить анимацию.

 .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); 
        }
    }

Комментарии:

1. То, что у вас есть, должно работать, с чем именно у вас проблемы? (Есть несколько других свойств, которые могут помочь, в зависимости от того, чего вы хотите достичь, например, режим анимации-заливки , начало преобразования )

Ответ №1:

Я предполагаю, что после завершения анимации логотип вернется к 0deg. Вы должны быть в состоянии исправить это, если добавите: transform: rotate(90deg); к своему .sub-page-logo img подобному, чтобы:

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

Ответ №2:

Я думаю, вы хотите сохранить конечное состояние анимации для своего элемента.

Определение MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode):

CSS-свойство animation-fill-mode задает, как CSS-анимация применяет стили к своей цели до и после ее выполнения.

 .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); 
        }
    }
Метки: