@MaxKondratenko

Возможно ли обнулить итерации animation CSS3 без JavaScript?

Проблема заключается в следующем.
Допустим навожу на какой то элемент со свойством :hover
и запускается анимация, но как вы все знаете если убрать указатель мыши с объекта, он возвращается в своё исходное состояние. А мне нужно чтобы на объекте прошла анимация до конца.
Перелопалит кучу форумов, не нашел решение. Единственное до чего допер сам так это если анимацию применить к самому объекту, а потом при наведении на объект перезапустить её свойством animation-play-state: running; но всё это работает лишь в сафари... в остальных браузерах анимация запускается один раз и больше не работает при наведении на объект.

@keyframes swing
{	
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }  
}

//анимация срабатывает один раз , но так как конкретно этот элемент находится ниже, этого не видит пользователь пока не прокрутить страницу
li {
	width: 500px;
	height: 50px;
	margin-bottom: 10px;
	position: absolute;	
	-webkit-animation: swing 1s ease-in-out;
	animation: swing 1s ease-in-out;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}
//затем каждый раз когда навожу на элемент, запускается анимация и доходит до конца, но работает только в Safari Mac
li:hover {
	-webkit-animation-play-state: running;
	animation-play-state: running;
}


Понятно, что это всё можно сделать средствами JavaScript, но... как сделать это лишь на чистом CSS3 если конечно возможно... хотя в сафари на данный момент у меня получилось
  • Вопрос задан
  • 2575 просмотров
Решения вопроса 1
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы