Судя по вашим коментариям вы сами способны сделать CSS-анимации. Что касается радиального-размытия, то здесь вам придется использовать специальные маски и фильтры, которые можно построить на основе SVG, если хотите, чтобы работало во всех современных браузерах. Ниже приведен пример радиального-размытия, который работает в Edge, Firefox и Webkit-браузерах. Однако правильную анимацию такого размытия средствами чистого CSS пожалуй не сделать (по крайней мере я не знаю как), но средствами JS-анимации можно. Ежели нужно чисто CSS-решение, то можно просто плавно убирать прозрачность у фильтра (но это не будет анимацией самого размытия). Ниже приведен пример такой анимации по наведению курсора мыши (hover). Я полагаю, адаптировать этот код под ваши нужды не составит большого труда:
.effect {
width: 400px; height: 300px;
}
.effect img{
position: absolute;
}
.filter {
-webkit-mask: radial-gradient( closest-side at center, transparent 0%, black 100%);
mask: url('#mask-radial');
filter: url('#radial-filter');
transition: opacity 1s ease;
opacity: 1;
}
.filter:hover {
opacity: 0;
}
<div class="effect">
<img src="http://css3create.com/squelettes/images/articles/flou-localise-1.jpg" alt="" />
<img class="filter" src="http://css3create.com/squelettes/images/articles/flou-localise-1.jpg" alt="" />
</div>
<svg height="0">
<defs>
<mask id="mask-radial">
<rect width="400" height="300" fill="url(#radgrad)"></rect>
<radialGradient id="radgrad" cx="50%" cy="50%" r="50%">
<stop stop-color="black" offset="0%"/>
<stop stop-color="white" offset="100%"/>
</radialGradient>
</mask>
<filter id="radial-filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
</defs>
</svg>
keyframe
- от 0% до 50% будет анимация дляopacity
, от 50% до 100% дляblur