Фоновая анимация не работает (CSS, S CSS) - PullRequest
Новая
       0

Фоновая анимация не работает (CSS, S CSS)

0 голосов
/ 11 марта 2020

Мне бы хотелось, чтобы мой фон появлялся медленно и постепенно, и я думал, что это будет довольно легко, но я не могу. Какие-либо предложения? Могу ли я сделать это только с html, CSS и S CSS (еще не опытный пользователь последнего). 

body {
  background-image: url(https://images.pexels.com/photos/1001682/pexels-photo-1001682.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
  background-repeat: no-repeat;
  animation-name: b-anime;
  animation-delay: 1s;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  transition-property: background;
  @keyframes b-anime {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 0.25;
    }
    50% {
      opacity: 0.5;
    }
    75% {
      opacity: 0.75;
    }
    100% {
      opacity: 1;
    }
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>icy-blues</title>
  <link rel="stylesheet" type="text/css" href="website1.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width>
        <meta name=" description " content="xx ">
        <meta name="keywords " content="stuff ">
        <meta name="author " content="Ray ">
    </head>

     <body>



     </body>

 </html>

1 Ответ

2 голосов
/ 11 марта 2020

Прежде всего, ваше keyframes определение должно быть вне вашего body стиля. Тогда в этом случае невозможно использовать opacity для background-image прозрачности, взглянуть на документацию по прозрачности .

Но вы можете установить эффект прозрачности для ::after элемент, и оживить это.

Вы можете сделать это следующим образом: 

body {
    position: relative;
    height: 100vh;
    width: 100vw;
    padding: 0;
    margin: 0;
}

body::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(https://images.pexels.com/photos/1001682/pexels-photo-1001682.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation-name: b-anime;
    animation-delay: 1s;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    transition-property: background;
  }

@keyframes b-anime {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 0.25;
    }
    50% {
      opacity: 0.5;
    }
    75% {
      opacity: 0.75;
    }
    100% {
      opacity: 1;
    }
}
<body></body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...