background-image animation with CSS

Question

background-image animation with CSS

Navigation

#1 by (1 votes)

1

blz?

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

Follow the link: link

It turns out that the animation is not 100%, sometimes it seems a bit bugged, after a few moments, a minute (sometimes less), the time between the transition from one background image to another decreases, it gets very fast .. I've done a lot of research on this kind of animation, I have tried several examples, the code exemplified in Codepen represents the best result I have.

Can anyone 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><linkrel="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>

css-animations background-image

asked by anonymous 07.08.2018 / 14:51

1 answer

Help with Json to get API value Inner Join with like, Mysql, and Datatable

score 1 · Accepted Answer

Dude, in case your animation is a simple "slideshow", you did not even have to use animation-direction or animation-fill-mode , I think this may have bugged your slide. Another thing I noticed is that there was a "blur" between one image and another. This is because they were of different sizes.

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

Documentation about fill-mode : link

Documentation about direction : link

All should measure 1920x1070 but one of them was with 1920x1071 ai there was a tremor in the image exchange.

I just made some adjustments to animation and I think it worked. Test there.

The StackOverflow Snippet does not accept http links, it has to be https, so it does not work right here, but test in 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><scriptsrc="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>