CSS эффект исчезновения или fadeOUT + BLUR без JavaScript

https://codepen.io/tweenpix/pen/dyvoWrm

Интересный анимированный эффект на CSS3 без JavaScript (кроссбраузерность подключать не стал), но это возможно.

Создаем в HTML обертку:

<div class="wrapper">
<span>A</span><span>P</span><span>E</span><span>X</span><span>W</span><span>E</span><span>B</span>
</div>

Прописываем CSS для обертки:
.wrapper {
display: block;
text-align:center;
font-size: 60px;
font-weight: bold;
}

CSS для каждого элемента:

.wrapper span {
line-height:500px
}

.wrapper span:nth-child(1) {
animation: blur 3s ease 0s 1;
animation-fill-mode: forwards;
}

.wrapper span:nth-child(2) {
animation: blur 3s ease 0.5s 1;
animation-fill-mode: forwards;
}

.wrapper span:nth-child(3) {
animation: blur 3s ease 1s 1;
animation-fill-mode: forwards;
}

.wrapper span:nth-child(4) {
animation: blur 3s ease 1.5s 1;
animation-fill-mode: forwards;
}

.wrapper span:nth-child(5) {
animation: blur 3s ease 2s 1;
animation-fill-mode: forwards;
}

.wrapper span:nth-child(6) {
animation: blur 3s ease 2.5s 1;
animation-fill-mode: forwards;
}

.wrapper span:nth-child(7) {
animation: blur 3s ease 3s 1;
animation-fill-mode: forwards;
}

Создаем анимацию с названием "blur":

@keyframes blur {
0% {filter: opacity(1) blur(0);}
100% {filter: opacity(0) blur(100px);}
}

Всё, применяйте, эксперементируйте!