Как запустить анимацию ключевого кадра CSS3 один раз и только при срабатывании?

Я хотел бы реализовать анимацию HTML5, которая включает в себя нечто большее, чем просто перемещение элемента из точки А в точку Б. Вот почему я рассматриваю возможность использования ключевых кадров, а не переходов. Однако я просто хочу, чтобы анимация запускалась один раз и только при срабатывании.

Проблема двоякая: 1) Когда анимация закончена, элемент возвращается в исходное положение. Есть ли способ заставить его оставаться в конечном положении до дальнейшего уведомления? 2) Есть ли способ перезапустить анимацию позже из Javascript?

Другим возможным решением, которое я вижу, было бы объединение нескольких переходов с помощью события onTransitionEnd.

Какое лучшее решение здесь с учетом производительности? Я ориентируюсь только на браузеры Webkit, включая мобильные.

РЕДАКТИРОВАТЬ: на основе комментария @Christofer-Vilander я сделал JSfiddle, который в основном делает то, что я хотел. Спасибо!

HTML:

<button id="start">Start</button> <button id="reset">Reset</button>
<br/>
<div id="ball" class="ball"></div>

Javascript:

document.getElementById('start').addEventListener('click', function(e) {
    document.getElementById('ball').classList.add('remove');
});

document.getElementById('reset').addEventListener('click', function(e) {
    document.getElementById('ball').classList.remove('remove');
});

CSS:

.ball {
    width:100px;
    height:100px;
    border-radius:100px;
    background-color:darkred;
    position:absolute;
    top:100px;
    left:200px;
}

@-webkit-keyframes slide {
    from { top:100px; left:200px; }
    to { top:100px; left:-100px; }
}

.remove {
    animation: slide 1s linear;
    -webkit-animation: slide 1s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
}

animation css performance css-animations css-transitions
person Per Quested Aronsson    schedule 25.10.2013    source источник
comment
Вы должны иметь возможность использовать анимацию-fill-mode: forwards; для сохранения конечного состояния анимации. Как вы хотите, чтобы анимация снова запускалась? Onclick, hover или автоматически через определенное время?   -  person Christofer Vilander    schedule 25.10.2013
comment
Я хотел бы запустить его, используя как onClick, так и/или таймер.   -  person Per Quested Aronsson    schedule 25.10.2013
comment
Только что заметил ваше редактирование, рад, что смог помочь!   -  person Christofer Vilander    schedule 26.10.2013

Ответы (1)


arrow_upward
4
arrow_downward

Добавьте класс в элемент html с помощью Javascript и желаемый набор правил анимации css для этого класса. Используйте animation-fill-mode: forwards;, чтобы анимация запустилась один раз. Затем удалите класс из элемента, чтобы повторно запустить анимацию onClick.

person katsampu    schedule 01.05.2014