Анимация css3: hover; принудительно выполнить всю анимацию

Question

Анимация css3: hover; принудительно выполнить всю анимацию

Я создал простую анимацию отскока, которую применяю к состоянию : hover элемента:

@keyframes bounce {
    0% {
      top: 0;
      animation-timing-function: ease-out;
    }
    17% {
      top: 15px;
      animation-timing-function: ease-in;
    }
    34% {
      top: 0;
      animation-timing-function: ease-out;
    }
    51% {
      top: 8px;
      animation-timing-function: ease-in;
    }
    68% {
      top: 0px;
      animation-timing-function: ease-out;
    }
    85% {
      top: 3px;
      animation-timing-function: ease-in;
    }
    100% {
      top: 0;
    }
}

.box:hover { 
    animation: bounce 1s;
}

Анимация работает нормально, за исключением того, что когда вы убираете курсор с элемента, он резко останавливается. Есть ли способ заставить его продолжать заданное количество итераций, даже если мышь вышла? В основном то, что я ищу, - это анимация, запускаемая состоянием : hover . Я не ищу решение javascript . Я не видел способа сделать это в спецификации, но, может быть, есть очевидное решение, которое я здесь пропустил?

Вот скрипка, с которой можно поиграть: http://jsfiddle.net/dwick/vFtfF/

30

animation css3

задан c69 8 October 2011 в 17:33

1 ответ

Другие вопросы по тегам:

animation css3

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

score 0 · Answer 1

Тот же ответ с @methodofaction, но для любого использование Реагирует:

import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

export default function Icon({ icon }) {
    const [animated, setAnimated] = useState(false);

    return (
        <div
            onMouseEnter={() => setAnimated(() => true)}
            onAnimationEnd={() => setAnimated(() => false)}
        >
            <FontAwesomeIcon icon={icon} className={animated ? 'animated' : ''} />
        </div>
    );
}