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

Хотелось бы узнать, как скрыть 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?

Ответы

Ответ 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

Ответ 2

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

-webkit-animation:scaleme 1s forwards;

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

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

Ответ 3

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

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

или

div.container {
opacity: 0;
}

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

Ответ 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; }
}

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

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

#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- также может представлять интерес).