Запускать анимацию CSS3 только один раз (при загрузке страницы)

Question

Я делаю простую целевую страницу, управляемую CSS3.Чтобы он выглядел потрясающе, всплыло <a>:

@keyframes splash {
    from {
        opacity: 0;
        transform: scale(0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1.1, 1.1);
    }
    to {
        transform: scale(1, 1);
    }
}

И чтобы сделать его еще более удивительным, я добавил анимацию при наведении курсора:

@keyframes hover {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: scale(1.1, 1.1);
    }
}

Но возникает проблема!Я назначил анимацию следующим образом:

a {
    /* Some basic styling here */

    animation: splash 1s normal forwards ease-in-out;
}
a:hover {
    animation: hover 1s infinite alternate ease-in-out;
}

Все работает просто отлично: <a> брызгает в лицо пользователя и имеет приятную вибрацию при наведении курсора.Бит, как только пользователь стирает <a>, сглаживание заканчивается внезапно, и <a> повторяет анимацию splash.(Что логично для меня, но я не хочу этого) Есть ли способ решить эту проблему без какой-либо Jiggery Pokery класса JavaScript?

Answer 1

После нескольких часов поиска в Google: нет, это невозможно без JavaScript. animation-iteration-count: 1; внутренне сохраняется в атрибуте animation shothand, который сбрасывается и перезаписывается на :hover. Когда мы размываем <a> и выпускаем :hover, старый класс повторно применяет и, следовательно, снова сбрасывает атрибут animation.

К сожалению, нет способа сохранить определенные состояния атрибутов в состояниях элементов.

Вам придется использовать JavaScript.

Answer 2

Если я правильно понимаю, что вы хотите воспроизвести анимацию на A только после того, как вам нужно будет добавить

animation-iteration-count: 1

в стиле для a.

Answer 3

Это можно сделать с небольшими дополнительными затратами.

Просто оберните вашу ссылку в div и отделите анимацию.

HTML ..

<div class="animateOnce">
    <a class="animateOnHover">me!</a>
</div>

.. и css ..

.animateOnce {
    animation: splash 1s normal forwards ease-in-out;
}

.animateOnHover:hover {
    animation: hover 1s infinite alternate ease-in-out;
}

Answer 4

Я только что получил эту работу на Firefox и Chrome. Вы просто добавляете / удаляете приведенный ниже класс в соответствии с вашими потребностями.

.animateOnce {
  -webkit-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards; 
  -moz-animation:    NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
  -o-animation:      NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
}

Answer 5

Для вышеуказанного запроса примените ниже CSS для

animation-iteration-count: 1

Answer 6

Следующий код без "iteration-count: 1" приводил к тому, что все позиции пульсировали после ввода вплоть до последнего загруженного элемента, даже если «импульс» не использовался.

<li class="animated slideInLeft delay-1s animation-iteration-count: 1"><i class="fa fa-credit-card" aria-hidden="true"></i> 1111</li>


<li class="animated slideInRight delay-1-5s animation-iteration-count: 1"><i class="fa fa-university" aria-hidden="true"></i> 222222</li>

<li class="animated lightSpeedIn delay-2s animation-iteration-count: 1"><i class="fa fa-industry" aria-hidden="true"></i> aaaaaa</li>

<li class="animated slideInLeft delay-2-5s animation-iteration-count: 1"><i class="fa fa-key" aria-hidden="true"></i> bbbbb</li>

<li class="animated slideInRight delay-3s animation-iteration-count: 1"><i class="fa fa-thumbs-up" aria-hidden="true"></i> ccccc</li>