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

Я делаю простую целевую страницу, управляемую 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 -animation. (Что логично для меня, но я не хочу этого) Есть ли какой-нибудь способ решить эту проблему без какой-либо Jiggery Pokery класса JavaScript?

Ответ 1

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

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

Вам нужно будет использовать JavaScript.

Ответ 2

Это можно сделать с небольшим количеством дополнительных накладных расходов.

Просто оберните свою ссылку в 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;
}

Ответ 3

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

animation-iteration-count: 1

в стиле для A.

Ответ 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;
}

Ответ 5

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

<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>

Ответ 6

количество итераций анимации: 1; ?

Ответ 7

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

animation-iteration-count: 1