esCode.Ru

<script src="http://uway.ucoz.com/materials/1/9/jquery-1.11.1.js" type="text/javascript"></script>

<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>

*{
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;}
}

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