Animation with image in CSS

Asked

Viewed 151 times

3

I’m breaking my head with a simple thing, usually I solve these problems by looking at google, but today I did not have this luck.

And the following, I want to create a background with the class "Linear Animation Infinite", but I want to put a PNG image on top with the same done, moving the image along with the background color.

I could not in any way superimpose the image over the background color.

Note: I tried to use z-index but was not successful.

.imagem {
    width: 500px;
    height: 500px;
    background: url("https://i.imgur.com/XhYIPUs.png") repeat left top;
    -webkit-animation: 40s linear infinite LoadingBarProgress, .5s ease-out LoadingBarEnter;
    animation: 40s linear infinite LoadingBarProgress, .5s ease-out LoadingBarEnter;
    -webkit-transform-origin: left;
    transform-origin: left;
}
.cor-de-fundo {
    width: 500px;
    height: 500px;
    background: #a8a8a8 linear-gradient(to right, #a8a8a8, #3d3d3d, #ffafa9, #3d3d3d, #a8a8a8);
    background-size: 500%;
    -webkit-animation: 40s linear infinite LoadingBarProgress, .5s ease-out LoadingBarEnter;
    animation: 40s linear infinite LoadingBarProgress, .5s ease-out LoadingBarEnter;
    -webkit-transform-origin: left;
    transform-origin: left;
}

@-webkit-keyframes LoadingBarProgress {
    0% {
        background-position: 0% 0
    }
    to {
        background-position: 125% 0
    }
}

@keyframes LoadingBarProgress {
    0% {
        background-position: 0% 0
    }
    to {
        background-position: 125% 0
    }
}

@-webkit-keyframes LoadingBarEnter {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes LoadingBarEnter {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="imagem cor-de-fundo"></div>
</body>
</html>

html css css-transitions css-animations

  • Wouldn’t it be the case if you used another <div>?

  • work, however would have to use position, and affect the page in full :(

2 answers

2

Following the reasoning provided by Leandro Angelo, would be a solution, however as I do not want to modify the template too much to not have to use position, I will search another way, but if someone ever need I will leave the code ready below.

@-webkit-keyframes beta-gradient {
        0%{background-position:0 0}
        100%{background-position:100% 0}
    }
    @-moz-keyframes beta-gradient {
        0%{background-position:0 0}
        100%{background-position:100% 0}
    }
    @keyframes beta-gradient { 
        0%{background-position:0 0}
        100%{background-position:100% 0}
    }
    .colorbar {
            background: linear-gradient(to right, #B294FF, #57E6E6, #FEFFB8, #57E6E6, #B294FF, #57E6E6);
            background-size: 500% auto;    
            -webkit-animation: beta-gradient 3s linear infinite ;
            -moz-animation: beta-gradient 3s linear infinite;
            animation: beta-gradient 3s linear infinite ;
}
.colorbar {
    background: linear-gradient(to right, #B294FF, #57E6E6, #FEFFB8, #57E6E6, #B294FF, #57E6E6);
    background-size: 500% auto;
    -webkit-animation: beta-gradient 3s linear infinite;
    -moz-animation: beta-gradient 3s linear infinite;
    animation: beta-gradient 3s linear infinite;
}
.colorbar {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0.2;
}
.colorbar-img {
    position: relative;
    height: 200px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-image: -webkit-linear-gradient(315deg, rgba(9, 79, 153, 0.29), rgba(164, 164, 164, 0.18) 50%, rgba(45, 45, 81, 0.49) 95%), url(https://www.transparenttextures.com/patterns/climpek.png);
    background-image: linear-gradient(135deg, #ffffff00, #ffffff2e 50%, #ffffff00 95%), url(https://www.transparenttextures.com/patterns/climpek.png);
    font-size: 16px;
    animation: beta-gradient 40s linear infinite;
}
<div class="colorbar-img">
<div class="colorbar"></div>

  • You can actually do it with a single div after taking a look at my answer. []’s

2


In fact as you said you wanted to touch the template a little is possible yes do as a div

You get the effect using only one div and using the pseudo-class ::after in div See the example to better understand, note that it is only 1 div.

@-webkit-keyframes beta-gradient {
    0%{background-position:0 0}
    100%{background-position:100% 0}
}
@-moz-keyframes beta-gradient {
    0%{background-position:0 0}
    100%{background-position:100% 0}
}
@keyframes beta-gradient { 
    0%{background-position:0 0}
    100%{background-position:100% 0}
}

.colorbar {
  width: 100%;
  height: 200px;
  background: linear-gradient(to right, #B294FF, #57E6E6, #FEFFB8, #57E6E6, #B294FF, #57E6E6);
  background-size: 500% auto;
  -webkit-animation: beta-gradient 3s linear infinite;
  -moz-animation: beta-gradient 3s linear infinite;
  animation: beta-gradient 3s linear infinite;
  position: relative;
  overflow: hidden;
}
.colorbar::after {
  content: "";
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  background-image: -webkit-linear-gradient(315deg, rgba(9, 79, 153, 0.29), rgba(164, 164, 164, 0.18) 50%, rgba(45, 45, 81, 0.49) 95%), url(https://www.transparenttextures.com/patterns/climpek.png);
  background-image: linear-gradient(135deg, #ffffff00, #ffffff2e 50%, #ffffff00 95%), url(https://www.transparenttextures.com/patterns/climpek.png);
  -webkit-animation: beta-gradient 40s linear infinite;
  -moz-animation: beta-gradient 40s linear infinite;
  animation: beta-gradient 40s linear infinite;
}
<div class="colorbar"></div>

  • 1

    Thanks for answering, it worked out now, vlw.

  • @Vitorhugo without problems young, tmj!

Browser other questions tagged html css css-transitions css-animations

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