Скрыть div после анимации CSS3

Question

Хотелось бы узнать, как скрыть div после набора анимации css3. Вот мой код:

HTML

<div id='box'>
    hover me
</div>​

CSS3

#box{
 position:absolute;
 top:200px;
 left:200px;
 width:200px;
 height:150px;
 background-color:red;
}

#box:hover{
  -webkit-animation:scaleme 1s;
}

@-webkit-keyframes scaleme {
  0% { -webkit-transform: scale(1); opacity: 1; }
  100% { -webkit-transform: scale(3); opacity: 0;display:none; }
}    
​

Вот пример jsfiddle для лучшей иллюстрации:

http://jsfiddle.net/mochatony/Pu5Jf/18/

Есть идеи, как сделать скрытый ящик навсегда, лучше всего без JavaScript?

Answer 1

К сожалению, нет лучшего решения с использованием только CSS3. Анимации всегда возвращаются к значениям по умолчанию ( см. В библиотеке разработчиков Safari ).

Но вы можете попробовать поиграть со свойством -webkit-animation-fill-mode.

Например:

#box:hover{
  -webkit-animation:scaleme 1s;
  -webkit-animation-fill-mode: forwards;
}

По крайней мере, не сразу вернуть ящик в состояние display:block;.

Используя JavaScript, вы можете сделать это, используя webkitAnimationEnd событие.

Например:

var myBox = document.getElementById('box');
myBox.addEventListener('webkitAnimationEnd',function( event ) { myBox.style.display = 'none'; }, false);

Пример на jsFiddle

Answer 2

Измените определение анимации на:

-webkit-animation:scaleme 1s forwards;

Это значение для режима заливки анимации . Значение «forward» указывает анимации применять значения свойств, определенные в последнем исполняемом ключевом кадре, после последней итерации анимации, пока стиль анимации не будет удален.

Конечно, в вашем примере стиль анимации будет удален при удалении наведения. На данный момент я вижу необходимость в небольшом кусочке JavaScript для добавления класса, который запускает анимацию. Поскольку класс никогда не будет удален (до тех пор, пока страница не будет перезагружена), div будет скрыт.

Answer 3

Поскольку элементы анимации CSS заканчиваются в своем исходном состоянии CSS, сделайте скрытое исходное состояние, уменьшив его до нуля или удалив его непрозрачность:

div.container {
transform: scale(0);
-webkit-transform: scale(0);
}

или

div.container {
opacity: 0;
}

Один разанимация завершена, div вернется к исходному CSS, который скрыт.

Answer 4

Это можно (вроде) решить без использования JavaScript. Поскольку в анимации используются ключевые кадры, то, что вы просите, возможно, если установить длительность слишком высокого значения, скажем, 1000 с, и позволить переходу завершиться в низком кадре, например, 0,1%.

При этом анимация никогда не заканчивается и, следовательно, остается в форме.

#box:hover {
  -webkit-animation:scaleme 1000s;
}

@-webkit-keyframes scaleme {
  0% { -webkit-transform: scale(1); opacity: 1; }
  0.1%, 100% { -webkit-transform: scale(3); opacity: 0;display:none; }
}

1000 с не требуется в этом конкретном примере. 10 секунд должно быть достаточно для эффектов парения.

Однако возможно также пропустить анимацию и использовать вместо нее основные переходы.

#box2:hover {
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;  
  -moz-transform: scale(3);
  -webkit-transform: scale(3);
  opacity: 0;
}

Я раздвоил вашу скрипку и изменил ее, добавив два для сравнения: http://jsfiddle.net/madr/Ru8wu/3/

(я также добавил -moz-, поскольку нет причин не делать этого. -o- или -ms- также могут представлять интерес).