Анимация display:none

Интересный пример создания блоков, каждый из которых исчезает после нажатия по нему. Использование данного примера ограничивается только фантазией, но мне кажется что с помощью таких исчезающих блоков можно сделать простенькую рекламу при входе на сайт.

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

Если есть вопросы, задавайте их в комментариях.

HTML

<div class="flexwrap">
<div class="item i1">
 <p>Для удаления блока просто нажмите на него.</p>
</div>
<div class="item i2">
 Все эффекты созданы с помощью CSS.
</div>
<div class="item i3">
 Простую JQuery фикцию используем для добавления активности классу элемента блока.
</div>
<div class="item i4">
 Удаление блока кликом.
</div>
</div>

CSS

*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html, body{
 background: silver;
 width: 100%;
 overflow-x: hidden;
}

.flexwrap{
 margin: 0 auto;
 width: 60%;
}

.item{
 font: 300 36px sans-serif;
 line-height: 1.3;
 padding: 100px 100px;
 text-align: center;
 color: white;
 cursor: pointer;
 clear: both;
 overflow: hidden;
}

.i1{
 background: salmon;
}

.i2{
 background: CornflowerBlue;
}

.i3{
 background: MediumSeaGreen;
}

.i4{
 background: SandyBrown;
}

.item.active{
 animation: remove 1s linear 0s 1 forwards;
 -webkit-animation: remove 1s linear 0s 1 forwards;
}

@-webkit-keyframes remove{
 0% {opacity: 1;
 max-height: 1000px;}
 99.9% {opacity: 0;
 max-height: 0px;
 padding: 0px 100px;}
 100% {opacity: 0;
 max-height: 0;
 padding: 0px 0px;
 animation: poof 0.1s linear 0s 1;
 -webkit-animation: poof 0.1s linear 0s 1;}
}

@keyframes remove{
 0% {opacity: 1;
 max-height: 1000px;}
 99.9% {opacity: 0;
 max-height: 0px;
 padding: 0px 100px;}
 100% {opacity: 0;
 max-height: 0;
 padding: 0px 0px;
 animation: poof 0.1s linear 0s 1;
 -webkit-animation: poof 0.1s linear 0s 1;}
}

@-webkit-keyframes poof{
 from {display: flex;}
 to {display: none;}
}

@keyframes poof{
 from {display: flex;}
 to {display: none;}
}

JS

$('.item').click(function(){
 $(this).addClass('active');
});