как сделать постепенный градиентный blur заднего фона сразу после загрузки сайта

Question

есть картинка на задний фон нужно что бы при загрузки страницы она появлялась медленно а через 0.5s после этого была анимация градиентого блюра центра картинки .

css селектора изображения:

.picture {
    position: center;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
 }

 @-webkit-keyframes fadeIn {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }

 @keyframes fadeIn {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }

Answer 1

Судя по вашим коментариям вы сами способны сделать 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>

Answer 2

Хвала современному CSS. Что тут происходит: размещаем поверх картинки блок, накидываем на него маску и backdrop-filter, анимируем.

.pic {
  position: relative;
  width: 300px;
  height: 300px;
}

.pic__masked {
  -webkit-mask: radial-gradient(closest-side at center, black 50%, transparent 100%);
  mask: radial-gradient(closest-side at center, black 50%, transparent 100%);
  position: absolute;
  left: 0;
  top: 0;
  backdrop-filter: blur(10px);
  width: 100%;
  height: 100%;
  animation: 3s linear 0s infinite alternate blurScale;
}

@keyframes blurScale {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

<div class="pic">
  <img src="https://placeimg.com/300/300/people" alt="">
  <div class="pic__masked"></div>
</div>

БЛОГ НА HUSL

как сделать постепенный градиентный blur заднего фона сразу после загрузки сайта

Ответы (2 шт):