Animation with CSS image

Navigation
3

I'm breaking my head with something simple, I usually solve these problems by looking at google, but today I was not that lucky.

And the following, I want to create a background with the class "animation linear infinite", but I want to put a PNG image over with the same effect, moving the image along with the background color.

I was not able to overwrite the image in any way over the background color.

Note: I already tried z-index but I did not succeed. 

.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>
    
asked by anonymous 26.08.2018 / 01:03

2 answers

2

In fact, as you said that you wanted to do a little bit of the template, you can only do it as a div

You get the effect using only div and using the pseudo-class ::after on div See the example to understand better, notice that it is only 1% / p> 

@-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>
    
27.08.2018 / 00:12
2

Following the reasoning provided by Leandro Angelo , it would be a solution, however as I do not want to modify I'm going to look for another way, but if anyone ever needs to, I'll leave the code ready. 

@-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>
    
26.08.2018 / 05:04
Emit the discriminant function constant - linear discriminant analysis [R] GROUP BY in query with column by subquery