I'm trying to create a repeated background existing out of two parts. Each part is a gradient and while the one moves up, the other moves down.
The best I got is this:
html {
background: black;
color: #4c4c4c;
}
body {
margin: 30vh auto;
max-width: 80vw;
}
.wave {
background: none;
height: 1rem;
width: 50%;
position: absolute;
z-index: 2;
animation: move 700ms 0ms steps(2) infinite both;
}
.color::after,
.color::before {
content: "";
position: absolute;
left: 0;
right: 0;
height: 100%;
top: 0;
}
.color {
background-image: linear-gradient(#fe0000 50%, #6531ff 0 100%);
}
.color::after {
background: linear-gradient(to bottom, #f4e04d, #3bceac 20%, rgba(22, 22, 22, 0) 100%), linear-gradient(to right, #042a2b 3rem, transparent 3rem, transparent 6rem);
}
.wave,
.color::after,
.color::before {
background-size: 5rem 1rem;
background-repeat: repeat-x;
}
#keyframes move {
0% {
margin-top: -3rem;
}
100% {
margin-top: -3.25rem;
}
}
<div class="color wave"></div>
I get why this doesn't work, but not sure how to proceed.
Since it is difficult to describe, here is an image of what I'm looking for:
At first (position 1), all odd blocks are higher than the even blocks. After the first animation, it's the other way around (position 2) and so on.
Maybe like below:
.box {
height:100px;
background:linear-gradient(red,blue,yellow,red) 0 0/100% 200%;
animation:y 2s linear infinite;
}
.box::after {
content:"";
display:block;
height:100%;
background:linear-gradient(green,lightblue,pink,green) 0 0/100% 200%;
animation:inherit;
animation-direction: reverse;
-webkit-mask:linear-gradient(90deg,#fff 50%,transparent 0) 0 0/20% 100%;
}
#keyframes y {
to {
background-position:0 -200%;
}
}
<div class="box"></div>
UPDATE: This is an interesting problem. I'm surprised to find that I don't have an obvious or particularly elegant solution to having a gradient running vertically while repeating with horizontal gaps.
Far more elusive than I initially expected.
Best I could come up with is to put one of the gradients in a pseudo element and apply a mask-image. This won't work in IE, but it appears to be supported everywhere else.
See updated demo below.
If I understand what you're trying to do, I think you could accomplish it by animating the background positions:
.demo {
height: 200px;
background-image:
linear-gradient(#f4e04d, #3bceac 20%, rgba(22, 22, 22, 0) 100%);
animation: move 0.7s infinite alternate;
background-size: 3rem;
position: relative;
}
.demo::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(#042a2b, transparent);
/* This is the magic part: using a horizontal repeating-linear-gradient
to mask out "columns", allowing the container's background gradient to
show through */
-webkit-mask-image: repeating-linear-gradient(to right, black 0 3rem, transparent 3rem 6rem);
background-size: 3rem;
/* run the same animation in reverse to animate up instead of down */
animation: move 0.7s infinite alternate-reverse;
}
#keyframes move {
from {
background-position: 0 0;
}
to {
background-position:
0 200px;
}
}
<div class="demo"></div>
It's difficult to infer exactly what you're trying to do, but here's another sample (very similar to #ray hatfield's answer) that will move the first background down while the second background moves up:
.sample {
width: 250px;
height: 50px;
position: relative;
background-image: linear-gradient(to bottom, #f4e04d, #3bceac 20%, rgba(22, 22, 22, 0) 100%), linear-gradient(to right, #042a2b 3rem, transparent 3rem, transparent 6rem);
animation: move 1s infinite linear;
}
#keyframes move {
0%, 100% {
background-position: 0 -75px, 0 0;
}
50% {
background-position: 0 0, 0 -75px;
}
}
<div class="sample"></div>
I'm tryin to make a infinte animation but at some point it seems to hop back to the start.
Thats the code
h1 {
background: url(Pepesad.png) repeat-x;
width: 90%;
margin: 1em auto;
max-width: 600px;
height: 512px;
animation: flybirds 1s linear infinite;
}
#keyframes flybirds {
from {
background-position: 0px 0px
}
to {
background-position: 300px 0px
}
}
Some of the CSS rules you mentioned for h1 seems unnecessary for your purpose. Mentioning the width gives the animation very less space. Consider providing the h1 a container/ wrapper and set appropriate width for it.
h1 {
background: url(Pepesad.png) repeat-x;
height: 512px;
width: 5076px;
animation: flybirds 1s linear infinite;
}
Also in the keyframes you have mentioned the x-axis to 300px which cause the breaking effect during the animation. I suggest you update it
#keyframes flybirds {
from {
background-position: 0px 0px
}
to {
background-position: -100% 0px
}
}
Another alternative you could use is :
#keyframes flybirds {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-1692px, 0, 0);
}
}
Note: the reason why I suggest to use an additional at all, rather than animating background-position on h1, is so that we can use an animated transform to do the movement, which is much more performant.
I am trying to color a progress bar depending on the value.
progress[value]::-webkit-progress-value {
position: relative;
background-color: rgba(0, attr(value) ,0,1);
background-size: 35px 20px, 100% 100%, 100% 100%;
border-radius:3px;
/* Let's animate this */
animation: animate-stripes 5s linear infinite;
}
Looks like attr(value) doesn't appear to work - is there a way to inject value in there? Using chrome
If you use pseudo element before to display your progress?
Maybe this could work?
progress[value]::-webkit-progress-value {
&:before{
content: [attr-data];
display: block;
position: relative;
background-color: rgba(0, attr(value) ,0,1);
background-size: 35px 20px, 100% 100%, 100% 100%;
border-radius:3px;
/* Let's animate this */
animation: animate-stripes 5s linear infinite;
}
}
I am having a page transition from a background-color to a background-image. I have tried a variety of options...but it seems when the page transitions to the background image, it needs some background-color, and sets background-color:transparent..and the image never shows. Here is my CSS:
#keyframes backgroundintro {
0% {
background:#000000;
}
25% {
background:#0c2336;
}
100% {
background: linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
), url('../IMG/background.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/*isolation: isolate;
mix-blend-mode: color-burn;*/
}
}
body {
animation-duration: 43.90s;
transition-timing-function: ease-in;
animation-name:backgroundintro;
}
I'm blending a background-color and the background-image..so using a gradient.
Fiddle here: https://jsfiddle.net/7god9hoL/
The trick really is to make a background image transparent. This can be achieved by using pseudo-element (e.g. :before) which covers your main element (hence the absolute positioninig and top, left, bottom, right set to 0). Then the as an animation you just change the opacity of this pseudo-element. Here's a simple example:
(after running the snippet hover the square)
div {
width: 200px;
height: 200px;
background: red;
position: relative;
z-index: 1;
}
div:before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background: url('http://www.bestmanspeechestoasts.com/wp-content/themes/thesis/rotator/sample-4.jpg');
opacity: 0;
transition: all 1s;
}
div:hover:before {
opacity: 1;
}
<div></div>
I have the following fiddle (Wekbit/Chrome only).
Just watch the animation for a while and you will see it "stop" for a millisecond and then continues again. Could it be the svg file itself? If that is the case, how can I fix this file so the hiccup is gone?
HTML
<div class="tile10"></div>
CSS
#-webkit-keyframes move {
0% {
background-position: 6px 0;
}
100% {
background-position: 6px 80px;
}
}
.tile10 {
width: 80px;
height: 80px;
position: absolute;
background: url(http://www.mauricederegt.nl/loopband.svg);
background-repeat: repeat-y;
-webkit-animation: move 3s linear infinite;
z-index: -1;
}
It was indeed in the image. Your rows are about 6px heigh. 80 is not dividable by 6, so there will be a little displacement. 78 however is dividable by 6.
http://jsfiddle.net/rtS5U/5/
So instead of moving it 80px down, move it 78px down.
#-webkit-keyframes move {
0% {
background-position: 6px 0;
}
100% {
background-position: 6px 78px;
}
}