it-swarm.com.ru

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

45
buschtoens

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

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

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

27
buschtoens

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

animation-iteration-count: 1

в стиле для a.

23
Strelok

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

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

Я только что получил эту работу на 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;
}
18
Ricardus

Следующий код без "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>
0
happyjjd

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

animation-iteration-count: 1
0
Nagnath Mungade