CSS Blur animation — delayed start?

Question

[VANY]

Здравствуйте.
Имеется:
<div class="blur">Something</div>

.blur {
    -webkit-filter: blur(5px);
}

Как заставить див через определенное количество времени выйти из блура? Т.е. blur(0px). Я плохо разбираюсь в CSS анимации, но уверен - где-то там кроется решение :) Был бы рад помощи!

Comments

[VANY]

Я в них не очень разбирался, вот что накидал:
/* GAUS ANIMATION */
@-webkit-keyframes GausIn { from { -webkit-filter: blur(20px); } to { -webkit-filter: blur(0px); } }
@-moz-keyframes GausIn { from { -webkit-filter: blur(20px); } to { -webkit-filter: blur(0px); } }
@keyframes GausIn { from { -webkit-filter: blur(20px); } to { -webkit-filter: blur(0px); } }

.gaus-in {
-webkit-filter: blur(20px);
-webkit-animation:GausIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:GausIn ease-in 1;
animation:GausIn ease-in 1;

-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}

.gaus-in.one {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
animation-delay: 4s;
}

.gaus-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}

.gaus-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}

Answer 1

[Денис Инешин]

Разумеется keyframes

Answer 2

[Кирилл Грачёв]

jsfiddle.net/yquweh29

Comments

[Кирилл Грачёв]

А если идти дальше, превозмогая трудности, то можно решить эту задачу с помощью jQuery codepen.io/anon/pen/gbYZVw

Answer 3

[Максим Гречушников]

Вот тут есть как сделать задержанный старт, или старт анимации по событию
вам нужно animation-delay
devdocs.ru/verstka/css3-animations-for-beginners