Ключевые кадры Webkit на Hover - предотвращение предыдущей анимации

Question

У меня есть элемент, у которого есть набор @ -webkit-keyframes для анимации. При загрузке страницы эти ключевые кадры запускаются, и вступление выглядит великолепно.

Далее у меня есть второй набор@ -webkit-keyframes при наведении и задание повторения, поэтому при наведении указатель элемента имеет циклическую анимацию.Это также прекрасно работает.

Однако, как только я убираю мышь от элемента, первый (вступительный) набор ключевых кадров запускается снова.Я не хочу, чтобы он запускался после первого запуска.Есть ли простой способ предотвратить это в CSS?

Минимальный пример того, что у меня есть

#e { -webkit-animation: fadeIn 1s ease-out 0.5s; } /* Fades in on load, BUT gets called when mouse moves away as well */
#e:hover { -webkit-animation: pulse 1s ease-in-out 0s infinite alternate; } /* Works fine, pulses on hover */

Кроме того, может кто-то с 1500+ репутацией отредактировать теги и добавить тег webkit-animation?Я не могу поверить, что это еще не было создано ...: \

Answer 1

Нет чистого способа CSS выполнить то, что вам нужно.Вы можете добавить анимацию к родительскому элементу или оболочке и анимировать каждый элемент отдельно:

.wrapper {
    -webkit-animation: fadeIn .5s ease-out 0 1;
}
#e { 
    width: 100px;
    height: 100px;
    background-color: #000;
}
#e:hover { 
    -webkit-animation: pulse 100ms ease-in-out 0s infinite alternate; 
} 
@-webkit-keyframes fadeIn {
        0%   { opacity: 0; }
        100% { opacity: 0.5;}
}

@-webkit-keyframes pulse {
        0%   { background-color: #000; }
        100% { background-color: #c00; }
}

http://jsfiddle.net/3PuT2/