Скрыть блок с помощью анимации css

Question

Всем привет. Подскажите как сделать, чтобы после анимации блок не появлялся jsfiddle

setTimeout(function(){ 
    $('.test').addClass('animate');
}, 2000);

.test {
width : 100px;
height: 100px;
background: green;
}
.animate {  
  animation: zoomOut; 
  animation-duration: 2s; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="test"></div>

Answer 1

добавьте animation-fill-mode: forwards; к вашему классу .animate

CSS свойство animation-fill-mode определяет, как нужно применять стили к объекту анимации до и после ее выполнения.

forwards - По окончании анимации элемент сохранит стили последнего ключевого кадра, который определяется значениями animation-direction и animation-iteration-count

setTimeout(function() {
  $('.test').addClass('animate');
}, 2000);

.test {
  width: 100px;
  height: 100px;
  background: green;
}

.animate {
  animation: zoomOut;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="test"></div>

Более подробно об animation-fill-mode можете прочитать по ссылке - animation-fill-mode

Answer 2

можно через небольшой изврат:

.finish {
  display: none;
}

setTimeout(function(){ 
    $('.test').addClass('animate');
}, 3000);

setTimeout(function(){ 
    $('.test').addClass('finish');
}, 4900);

если требуется, чтобы объект исчез полностью и не занимал места, в противном случае объект не будет виден, но место под него будет оставлено

БЛОГ НА HUSL

Скрыть блок с помощью анимации css

Ответы (2 шт):