Keyframe in css for background effect

Asked

Viewed 27 times

1

Hey, how you doing? I tried to make a background change using keyframe, but the images when they change blink the first time, as if I was loading. Is that normal or did I do something wrong? Here’s the page on github pages. I’m trying to do for mobile first and then desktop.

https://frazaovitor.github.io/Projeto-AVIX/

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap" rel="stylesheet">
    <title>AVIX CAMISARIA</title>
</head>
<header>
    <div class="logo">
        <h1>Desfazendo</h1>
        <img src="img/avixLogo.png" alt="logo avix">
        <h1> Padrões</h1>
    </div>
</header>
<body>
    <div class="carrossel"></div>
</body>

</html>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

.logo {
  display: flex;
  background-color: #000;
  color: #fff;
  font-size: 0.5rem;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.carrossel {
  height: 92vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: background 40s infinite alternate;
}

@keyframes background {
  0% {
    background-image: url("../img/background1.jpg");
  }
  25% {
    background-image: url("../img/background2.jpg");
  }
  50% {
    background-image: url("../img/background3.jpg");
  }
  100% {
    background-image: url("../img/background4.jpg");
  }
}

From now on, thank you very much.

html css animation

1 answer

1


Yes, it is normal, they do not blink, in fact the area is with white background, the next image has not been loaded yet, if you have been on a slow internet, like a slow 3G, maybe not even see the photo, what you can do is maybe change for <img> or use a "better" Carrousel system, or else to help in the code you already have you could use the https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

Example:

<head>
  ...

  <link rel="preload" href="../img/background1.jpg" as="image">
  <link rel="preload" href="../img/background2.jpg" as="image">
  <link rel="preload" href="../img/background3.jpg" as="image">
  <link rel="preload" href="../img/background4.jpg" as="image">
</head>

Remembering that Firefox does not support this, as there have been several problems previously and for now such feature is disabled in the browser.

I really recommend you use <img> or a ready-made Carousel system.

  • I got it. I was ready to change to a jquery or do it in JS, but I wanted to remove this doubt! Thanks!

Browser other questions tagged html css animation

You are not signed in. Login or sign up in order to post.