Как плавно вернуть CSS анимацию в ее текущее состояние?
у меня естьне анимированный элемент по умолчанию. Есть также триггер, который позволяет мне включать и выключать анимацию для этого элемента. Сама анимация очень проста: перемещает элемент слева направо и назад.
Когда я прекращаю анимацию, мой элемент, очевидно, возвращается в исходное положение. Но это возвращается внезапно, не гладко. Так что он просто меняет свою позицию с той, когда я отключил анимацию, на исходную. Мой вопрос: есть ли способ остановить его плавно, поэтому, когда я выключаю анимацию, она возвращается в исходное положение, но плавно / с анимацией.
Вот мой элемент и анимация:http://jsfiddle.net/2Lwftq6r/
HTML:
<input type="checkbox" id="anim">
<label for="anim">Start / stop animation</label>
<div></div>
CSS:
div {
margin-top: 50px;
width: 50px; height: 10px;
background: #000;
transform: translateX(0);
}
#anim:checked ~ div {
-webkit-animation: dance 2s infinite ease-in-out;
-moz-animation: dance 2s infinite ease-in-out;
}
@-webkit-keyframes dance {
0%, 100% { -webkit-transform: translateX(0); }
50% { -webkit-transform: translateX(300px); }
}
@-moz-keyframes dance {
0%, 100% { -moz-transform: translateX(0); }
50% { -moz-transform: translateX(300px); }
}