background-image Animation with CSS

Asked

Viewed 73 times

1

blz?

I have a "" with Parallax (parallaxie. js) and background image animation with CSS (Keyframes).

Follow the link: https://codepen.Io/Aguinaldo-Aranda/Pen/zLJwrM

It turns out that the animation is not 100%, sometimes it seems a bit buggy, after a few moments, a minute (sometimes less), the time between the transition of one background image and another decreases, gets very fast... I researched a lot about this type of animation, I tested several examples, the code exemplified in Codepen represents the best result I have.

Anyone can help?

Thank you

jQuery(function ($) {       
    $(".parallax").parallaxie({
            speed: 0.55,
            offset:0,
     });
  });
html{
  overflow: visible;
}
body{
  color: #fff;
}
section{
  width: 100%;
  color: #fff;
  padding: 140px 0;
}

.parallax {position: relative; background-size: cover; overflow: hidden; background-attachment: fixed;background-repeat: no-repeat; }

.no-transition *, .swiper-container *, .mfp-container *, .skillbar-bar-main *, .portfolio-grid *, .parallax, .header-searchbar *, .header-social-icon * { transition-timing-function:initial; -moz-transition-timing-function:initial; -webkit-transition-timing-function:initial; -o-transition-timing-function:initial; -ms-transition-timing-function:initial; transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s; -o-transition-duration: 0s; -ms-transition-duration: 0s; }


.slidein {
    height: 100% !important;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    z-index: 0;
    /*animation-delay: 2s !important; */
    /*background-image: url(../images/bg_simulador.jpg); */
    -webkit-animation: slidein ease-in-out 5s both infinite;
    -moz-animation: slidein ease-in-out 5s both infinite;
    animation: slidein ease-in-out 5s both infinite; 
    animation-direction: alternate;
}

@keyframes slidein {
  0% {
    background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_ibi-1-1920x1070.jpg);
  } 

  40% {
    background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_valclei-home-1920x1071.jpg);
  } 

  80% {
    background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_tecfil_2-1920x1070.jpg);
  }
  
  100% {
   background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_ibi-1-1920x1070.jpg);
  }

}
    
@-moz-keyframes slidein {
  0% {
    background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_ibi-1-1920x1070.jpg);
  } 

  40% {
    background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_valclei-home-1920x1071.jpg);
  } 

  80% {
    background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_tecfil_2-1920x1070.jpg);
  }
  
  100% {
   background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_ibi-1-1920x1070.jpg);
  }
}

@-webkit-keyframes slidein {
  0% {
    background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_ibi-1-1920x1070.jpg);
  } 

  40% {
    background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_valclei-home-1920x1071.jpg);
  } 

  80% {
    background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_tecfil_2-1920x1070.jpg);
  }
  
  100% {
   background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_ibi-1-1920x1070.jpg);
  }

}
<!DOCTYPE html>
<html>
<head>
    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  <script src="http://static.theultrasoft.com/parallaxie/parallaxie.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  
	<title></title>
</head>
<body>


<section id="simulador" class="parallax no-transition bg-img1 slidein conteudo_home">
    <div class="container">
        <div class="row">
		    <div class="col-md-8">
                <h3 class="text-uppercase alt-font text-blue font-weight-600">
                	Lorem Ipsumw
                </h3>
          <p>Nulla sit amet congue turpis. Cras sagittis lacus sit amet nulla molestie, sit amet sollicitudin velit dictum. Aenean a urna nec mi imperdiet molestie. Cras placerat arcu non condimentum elementum. Maecenas maximus ultricies magna, sed hendrerit elit pulvinar non. Sed suscipit eros eu sollicitudin hendrerit. Donec porta porttitor ullamcorper. Vestibulum vulputate nibh vel libero faucibus ornare. Curabitur vehicula tincidunt quam, ac suscipit leo ullamcorper quis. Pellentesque pulvinar metus vel leo porttitor facilisis. Morbi scelerisque consectetur justo nec placerat. Aliquam lorem lacus, gravida non tristique nec, viverra sed massa. Integer luctus, dolor scelerisque mattis lacinia, erat diam interdum augue, a consectetur ipsum massa sed enim. Nullam fermentum hendrerit dui. Nulla et eros sed odio facilisis iaculis id ut eros.

Phasellus facilisis non purus vitae ultricies. Curabitur at felis sed risus facilisis porttitor. Aliquam vitae feugiat purus, non aliquam quam. Integer in tellus eget purus mollis efficitur id ut ipsum. Donec egestas in ex vel rhoncus. Fusce sit amet eros ex. Donec facilisis neque eget nisi tincidunt, eu pulvinar arcu vestibulum. Suspendisse sit amet urna egestas, lacinia ligula nec, ultrices metus. Fusce rutrum lorem massa. Praesent lacinia ipsum vitae erat lobortis aliquam. Donec tincidunt ante id sapien vehicula aliquet. Sed dolor metus, vulputate eu euismod et, commodo quis turpis. Nam non nunc ac ante gravida porttitor eget vel orci.</p>
<p>Nulla sit amet congue turpis. Cras sagittis lacus sit amet nulla molestie, sit amet sollicitudin velit dictum. Aenean a urna nec mi imperdiet molestie. Cras placerat arcu non condimentum elementum. Maecenas maximus ultricies magna, sed hendrerit elit pulvinar non. Sed suscipit eros eu sollicitudin hendrerit. Donec porta porttitor ullamcorper. Vestibulum vulputate nibh vel libero faucibus ornare. Curabitur vehicula tincidunt quam, ac suscipit leo ullamcorper quis. Pellentesque pulvinar metus vel leo porttitor facilisis. Morbi scelerisque consectetur justo nec placerat. Aliquam lorem lacus, gravida non tristique nec, viverra sed massa. Integer luctus, dolor scelerisque mattis lacinia, erat diam interdum augue, a consectetur ipsum massa sed enim. Nullam fermentum hendrerit dui. Nulla et eros sed odio facilisis iaculis id ut eros.

Phasellus facilisis non purus vitae ultricies. Curabitur at felis sed risus facilisis porttitor. Aliquam vitae feugiat purus, non aliquam quam. Integer in tellus eget purus mollis efficitur id ut ipsum. Donec egestas in ex vel rhoncus. Fusce sit amet eros ex. Donec facilisis neque eget nisi tincidunt, eu pulvinar arcu vestibulum. Suspendisse sit amet urna egestas, lacinia ligula nec, ultrices metus. Fusce rutrum lorem massa. Praesent lacinia ipsum vitae erat lobortis aliquam. Donec tincidunt ante id sapien vehicula aliquet. Sed dolor metus, vulputate eu euismod et, commodo quis turpis. Nam non nunc ac ante gravida porttitor eget vel orci.</p>
<p>Nulla sit amet congue turpis. Cras sagittis lacus sit amet nulla molestie, sit amet sollicitudin velit dictum. Aenean a urna nec mi imperdiet molestie. Cras placerat arcu non condimentum elementum. Maecenas maximus ultricies magna, sed hendrerit elit pulvinar non. Sed suscipit eros eu sollicitudin hendrerit. Donec porta porttitor ullamcorper. Vestibulum vulputate nibh vel libero faucibus ornare. Curabitur vehicula tincidunt quam, ac suscipit leo ullamcorper quis. Pellentesque pulvinar metus vel leo porttitor facilisis. Morbi scelerisque consectetur justo nec placerat. Aliquam lorem lacus, gravida non tristique nec, viverra sed massa. Integer luctus, dolor scelerisque mattis lacinia, erat diam interdum augue, a consectetur ipsum massa sed enim. Nullam fermentum hendrerit dui. Nulla et eros sed odio facilisis iaculis id ut eros.

Phasellus facilisis non purus vitae ultricies. Curabitur at felis sed risus facilisis porttitor. Aliquam vitae feugiat purus, non aliquam quam. Integer in tellus eget purus mollis efficitur id ut ipsum. Donec egestas in ex vel rhoncus. Fusce sit amet eros ex. Donec facilisis neque eget nisi tincidunt, eu pulvinar arcu vestibulum. Suspendisse sit amet urna egestas, lacinia ligula nec, ultrices metus. Fusce rutrum lorem massa. Praesent lacinia ipsum vitae erat lobortis aliquam. Donec tincidunt ante id sapien vehicula aliquet. Sed dolor metus, vulputate eu euismod et, commodo quis turpis. Nam non nunc ac ante gravida porttitor eget vel orci.</p>
		    </div>
        </div>
    </div>
</section>
</body>
</html>

background-image css-animations

1 answer

1


Guy in the case of his animation is a simple "slideshow", nor was it necessary to use animation-direction or animation-fill-mode, I think it might have bugged your slide. Another thing I noticed was that there was a "shudder" between one image and another. That’s because they were different sizes.

When you use the animation-direction: alternate the animation comes to an end and turns back forward instead of continuing and making the lood in the ideal sense, so when the animation does that Backwards gave the impression that she gave an accelerated... The animation-fill-mode:both serves only for the frame to maintain the style of the first and last @keyframe, which in your case makes no difference as it is the same image in the first and last slide and the class .slidein has not background-image, the background-image is right in the @keyframes

Documentation on fill-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

Documentation on the direction: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

All should measure 1920x1070 but one of them was with 1920x1071 Then I’d shake the image change.

I just made a few adjustments to animation and I think you solved it. Forehead there.

OBS: Stackoverflow Snippet does not accept http links, it has to be https, so it doesn’t work right here, but test on your project that it should work

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
    />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <style>
        html {
            overflow: visible;
        }

        body {
            color: #fff;
        }

        section {
            width: 100%;
            color: #fff;
            padding: 140px 0;
        }

        .parallax {
            position: relative;
            background-size: cover;
            overflow: hidden;
            background-attachment: fixed;
            background-repeat: no-repeat;
        }

        .no-transition *,
        .swiper-container *,
        .mfp-container *,
        .skillbar-bar-main *,
        .portfolio-grid *,
        .parallax,
        .header-searchbar *,
        .header-social-icon * {
            transition-timing-function: initial;
            -moz-transition-timing-function: initial;
            -webkit-transition-timing-function: initial;
            -o-transition-timing-function: initial;
            -ms-transition-timing-function: initial;
            transition-duration: 0s;
            -moz-transition-duration: 0s;
            -webkit-transition-duration: 0s;
            -o-transition-duration: 0s;
            -ms-transition-duration: 0s;
        }


        .slidein {
            height: 100% !important;
            width: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50%;
            z-index: 0;
            /*animation-delay: 2s !important; */
            /*background-image: url(../images/bg_simulador.jpg); */
            -webkit-animation: slidein ease-in-out 5s infinite;
            -moz-animation: slidein ease-in-out 5s infinite;
            animation: slidein ease-in-out 5s infinite;
        }


        @-moz-keyframes slidein {
            0% {
                background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_ibi-1-1920x1070.jpg);
            }

            40% {
                background-image: url(http://placecage.com/1920/1070);
            }

            80% {
                background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_tecfil_2-1920x1070.jpg);
            }

            100% {
                background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_ibi-1-1920x1070.jpg);
            }
        }

        @-webkit-keyframes slidein {
            0% {
                background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_ibi-1-1920x1070.jpg);
            }

            40% {
                background-image: url(http://placecage.com/1920/1070);
            }

            80% {
                background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_tecfil_2-1920x1070.jpg);
            }

            100% {
                background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_ibi-1-1920x1070.jpg);
            }

        }

        @keyframes slidein {
            0% {
                background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_ibi-1-1920x1070.jpg);
            }

            40% {
                background-image: url(http://placecage.com/1920/1070);
            }

            80% {
                background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_tecfil_2-1920x1070.jpg);
            }

            100% {
                background-image: url(http://www.kzulo.com.br/wp-content/uploads/2018/03/bg_ibi-1-1920x1070.jpg);
            }

        }
    </style>
</head>

<body>








    <section id="simulador" class="parallax no-transition bg-img1 slidein conteudo_home">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <h3 class="text-uppercase alt-font text-blue font-weight-600">
                        Lorem Ipsumw
                    </h3>
                    <p>Nulla sit amet congue turpis. Cras sagittis lacus sit amet nulla molestie, sit amet sollicitudin velit
                        dictum. Aenean a urna nec mi imperdiet molestie. Cras placerat arcu non condimentum elementum. Maecenas
                        maximus ultricies magna, sed hendrerit elit pulvinar non. Sed suscipit eros eu sollicitudin hendrerit.
                        Donec porta porttitor ullamcorper. Vestibulum vulputate nibh vel libero faucibus ornare. Curabitur
                        vehicula tincidunt quam, ac suscipit leo ullamcorper quis. Pellentesque pulvinar metus vel leo porttitor
                        facilisis. Morbi scelerisque consectetur justo nec placerat. Aliquam lorem lacus, gravida non tristique
                        nec, viverra sed massa. Integer luctus, dolor scelerisque mattis lacinia, erat diam interdum augue,
                        a consectetur ipsum massa sed enim. Nullam fermentum hendrerit dui. Nulla et eros sed odio facilisis
                        iaculis id ut eros. Phasellus facilisis non purus vitae ultricies. Curabitur at felis sed risus facilisis
                        porttitor. Aliquam vitae feugiat purus, non aliquam quam. Integer in tellus eget purus mollis efficitur
                        id ut ipsum. Donec egestas in ex vel rhoncus. Fusce sit amet eros ex. Donec facilisis neque eget
                        nisi tincidunt, eu pulvinar arcu vestibulum. Suspendisse sit amet urna egestas, lacinia ligula nec,
                        ultrices metus. Fusce rutrum lorem massa. Praesent lacinia ipsum vitae erat lobortis aliquam. Donec
                        tincidunt ante id sapien vehicula aliquet. Sed dolor metus, vulputate eu euismod et, commodo quis
                        turpis. Nam non nunc ac ante gravida porttitor eget vel orci.</p>
                    <p>Nulla sit amet congue turpis. Cras sagittis lacus sit amet nulla molestie, sit amet sollicitudin velit
                        dictum. Aenean a urna nec mi imperdiet molestie. Cras placerat arcu non condimentum elementum. Maecenas
                        maximus ultricies magna, sed hendrerit elit pulvinar non. Sed suscipit eros eu sollicitudin hendrerit.
                        Donec porta porttitor ullamcorper. Vestibulum vulputate nibh vel libero faucibus ornare. Curabitur
                        vehicula tincidunt quam, ac suscipit leo ullamcorper quis. Pellentesque pulvinar metus vel leo porttitor
                        facilisis. Morbi scelerisque consectetur justo nec placerat. Aliquam lorem lacus, gravida non tristique
                        nec, viverra sed massa. Integer luctus, dolor scelerisque mattis lacinia, erat diam interdum augue,
                        a consectetur ipsum massa sed enim. Nullam fermentum hendrerit dui. Nulla et eros sed odio facilisis
                        iaculis id ut eros. Phasellus facilisis non purus vitae ultricies. Curabitur at felis sed risus facilisis
                        porttitor. Aliquam vitae feugiat purus, non aliquam quam. Integer in tellus eget purus mollis efficitur
                        id ut ipsum. Donec egestas in ex vel rhoncus. Fusce sit amet eros ex. Donec facilisis neque eget
                        nisi tincidunt, eu pulvinar arcu vestibulum. Suspendisse sit amet urna egestas, lacinia ligula nec,
                        ultrices metus. Fusce rutrum lorem massa. Praesent lacinia ipsum vitae erat lobortis aliquam. Donec
                        tincidunt ante id sapien vehicula aliquet. Sed dolor metus, vulputate eu euismod et, commodo quis
                        turpis. Nam non nunc ac ante gravida porttitor eget vel orci.</p>
                    <p>Nulla sit amet congue turpis. Cras sagittis lacus sit amet nulla molestie, sit amet sollicitudin velit
                        dictum. Aenean a urna nec mi imperdiet molestie. Cras placerat arcu non condimentum elementum. Maecenas
                        maximus ultricies magna, sed hendrerit elit pulvinar non. Sed suscipit eros eu sollicitudin hendrerit.
                        Donec porta porttitor ullamcorper. Vestibulum vulputate nibh vel libero faucibus ornare. Curabitur
                        vehicula tincidunt quam, ac suscipit leo ullamcorper quis. Pellentesque pulvinar metus vel leo porttitor
                        facilisis. Morbi scelerisque consectetur justo nec placerat. Aliquam lorem lacus, gravida non tristique
                        nec, viverra sed massa. Integer luctus, dolor scelerisque mattis lacinia, erat diam interdum augue,
                        a consectetur ipsum massa sed enim. Nullam fermentum hendrerit dui. Nulla et eros sed odio facilisis
                        iaculis id ut eros. Phasellus facilisis non purus vitae ultricies. Curabitur at felis sed risus facilisis
                        porttitor. Aliquam vitae feugiat purus, non aliquam quam. Integer in tellus eget purus mollis efficitur
                        id ut ipsum. Donec egestas in ex vel rhoncus. Fusce sit amet eros ex. Donec facilisis neque eget
                        nisi tincidunt, eu pulvinar arcu vestibulum. Suspendisse sit amet urna egestas, lacinia ligula nec,
                        ultrices metus. Fusce rutrum lorem massa. Praesent lacinia ipsum vitae erat lobortis aliquam. Donec
                        tincidunt ante id sapien vehicula aliquet. Sed dolor metus, vulputate eu euismod et, commodo quis
                        turpis. Nam non nunc ac ante gravida porttitor eget vel orci.</p>
                </div>
            </div>
        </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://static.theultrasoft.com/parallaxie/parallaxie.js"></script>
    <script>
        jQuery(function ($) {
            $(".parallax").parallaxie({
                speed: 0.55,
                offset: 0,
            });
        });
    </script>
</body>

</html>

  • hugocsl, thanks even for the help man. I changed by removing Fill-mode and Direction. I think it has improved a lot. Just do not understand the issue of the 5s, the image does not seem to figure 5 seconds, but I believe that this is due to the division of time in the keyframe, I used 0% and 100% the same image, switching to the other images in 40% and 80%. The size of the images are different only in this example that I built in the codepen, because I don’t have the online images that I will use, so I used any image and I didn’t notice the fact that they are not the same size. , sorry. Thanks for the Snippet id.

  • @Quati_blasted does not stay 5 second because you have 5s for the whole animation! If you want each image with 5s and vc has 3 images the animation should have 15s and not 5s... You also have to take into account that the time is the total time, including the transition of the fadein and fadeout of the image on the screen... Anything we are there. Good luck on the project

Browser other questions tagged background-image css-animations

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