CSS Blur animation - delayed start?

Question

css

Hello.
Available:
<div class="blur">Something</div>

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

How to force divs to come out of blur after a certain amount of time? Those. blur(0px). I don't know much about CSS animations, but I'm sure the solution is in there somewhere :) I'd love some help!

Answer 1

Of course keyframes

Answer 2

jsfiddle.net/yquweh29

Answer 3

Here is how to make a delayed start, or start an animation on an event,
you need animation-delay
devdocs.ru/verstka/css3-animations-for-beginners