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 trying to make a dynamic logo on http://calligraphic.fr/ with css keyframes.
Every keyframe has a different background image.
It looks great on Chrome but on Safari it displaces the background image at certain keyframes.
I tried everything to solve this, I hope someone can help me.
#keyframes worldtrip {
0% { background-image: url(https://calligraphic.fr/wp-content/uploads/2021/01/caligraphic-logo-first-01.svg); }
3% { background-image: url(https://calligraphic.fr/wp-content/uploads/2021/01/caligraphic-logo-2-01.svg); }
6% { background-image: url(https://calligraphic.fr/wp-content/uploads/2021/01/caligraphic-logo-3-01.svg); }
9% { background-image: url(https://calligraphic.fr/wp-content/uploads/2021/01/caligraphic-logo-4-01.svg); }
12% { background-image: url(https://calligraphic.fr/wp-content/uploads/2021/01/caligraphic-logo-5-01.svg); }
15% { background-image: url(https://calligraphic.fr/wp-content/uploads/2021/01/caligraphic-logo-6-01.svg); }
18% { background-image: url(https://calligraphic.fr/wp-content/uploads/2021/01/caligraphic-logo-7-01.svg); }
21% { background-image: url(https://calligraphic.fr/wp-content/uploads/2021/01/caligraphic-logo-8-01.svg); }
24% { background-image: url(https://calligraphic.fr/wp-content/uploads/2021/01/caligraphic-logo-9-01.svg); }
27% { background-image: url(https://calligraphic.fr/wp-content/uploads/2021/01/caligraphic-logo-10-01.svg); }
30% { background-image: url(https://calligraphic.fr/wp-content/uploads/2021/01/caligraphic-logo-11-01.svg); }
33% { background-image: url(https://calligraphic.fr/wp-content/uploads/2021/01/caligraphic-logo-12-01.svg); }
36% { background-image: url(https://calligraphic.fr/wp-content/uploads/2021/01/caligraphic-logo-13-01.svg); }
39% { background-image: url(https://calligraphic.fr/wp-content/uploads/2021/01/caligraphic-logo-first-01.svg); }
100% { background-image: url(https://calligraphic.fr/wp-content/uploads/2021/01/caligraphic-logo-first-01.svg); }
}
.q_logo::before {
pointer-events: none!important;
animation: 4s none 0s infinite worldtrip;
animation-delay: 3s;
content: "";
position: absolute;
background: url(https://calligraphic.fr/wp-content/uploads/2021/01/caligraphic-logo-first-01.svg);
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-size: 135px!important;
background-size: 500px 500px!important;
background-position: center top!important;
margin-top: -55px!important;
z-index: 999;
background-repeat: no-repeat!important;
}
Thank you!
This is bugging me, because I know that this is possible, I just don't really know how to write it properly. Here's an image of my vision:
So far in my css, I've implemented the cloud animation
#home{
margin: 0;
padding-top: 327px;
height: 57.78vh;
background: #6bbfff url('../images/clouds.png') repeat-x fixed 50% 10%;
text-align: center;
-webkit-animation: cloudmove 180s infinite linear;
animation: cloudmove 180s infinite linear;
}
#keyframes cloudmove{
0% { background-position: 0% 10%; }
100% { background-position: 100% 10%; }
}
#-webkit-keyframes cloudmove{
0% { background-position: 0% 10%; }
100% { background-position: 500% 10%; }
}
I've been trying to add the landscape illustration in the image shown above as background image number 2, but I'm having trouble. How do I get the css animation to not apply to it?
Thanks!
You do it like this:
Fiddle
Your pertinent CSS relies on some new features of backgrounds in CSS3.
Layered background images
You can instantiate these like so:
.my-rule {
background-image: url(image1.png), url(image2.png);
background-position: 0 0, 50% 50%;
}
It's pretty simple! You just need to separate all rules for each respective background image with commas. That goes straight down to your animations as well, like so:
#keyframes cloudmove{
0% { background-position: 0% 10%, 0% 0%; }
100% { background-position: 100% 10%, 100% 0%; }
}
#-webkit-keyframes cloudmove{
0% { background-position: 0% 10%, 0% 0%; }
100% { background-position: 500% 10%, 100% 0%; }
}
Hope that helps!
I want to use the progress bar of bootstrap as fancy looking barricade tape. That works quite nice, I also want want I to make the bar thicker. So I changed the background-size of the active progress-bar from 40px to 60:
div.progress.active .progress-bar {
background-size: 60px 60px;
}
That worked so far that the bar is now thicker but the animation does not loop correctly anymore.
What do I have to change so the loop occurs after 60 instead of 40 pixel?
see for yourself: http://jsfiddle.net/ok94vqoa/1/
You would need to update the keyframes for the progress-bar-stripes animation to 60px as well.
jsFiddle
#-webkit-keyframes progress-bar-stripes {
from {
background-position: 60px 0;
}
to {
background-position: 0 0;
}
}
#-o-keyframes progress-bar-stripes {
from {
background-position: 60px 0;
}
to {
background-position: 0 0;
}
}
#keyframes progress-bar-stripes {
from {
background-position: 60px 0;
}
to {
background-position: 0 0;
}
}
I am creating a sprite animation of a treasure chest opening. I have made 7 stages placed next to each other on a single "png" format image. It works fine with the following code but for some reason at the beginning of the animation the image jumps up. I thought it was a problem with the image and that the first stage may have been a little lower than the others. This was not the case, so I am left not knowing what the problem is. Can anyone enlighten me to what the problem is?
body {
text-align: center;
}
#-webkit-keyframes wink {
from { background-position: 0px; }
to { background-position: -3600px; }
}
#-moz-keyframes wink {
from { background-position: 0px; }
to { background-position: -3600px; }
}
#keyframes wink {
from { background-position: 0px; }
to { background-position: -3600px; }
}
.chest {
background-image: url("file://///FILESERVER/scratch/Sean/sprite2.png");
height: 600px;
margin: 0 auto;
width: 550px;
}
.chest:hover {
-webkit-animation: wink 2.5s steps(6, end) 1 forwards;
-moz-animation: wink 2.5s steps(6, end) 1 forwards;
animation: wink 2.5s steps(6, end) 1 forwards;
}
it is because you have not set an initial background position so when the animation starts the background images is jumping up.
.chest {
background-image: url("file://///FILESERVER/scratch/Sean/sprite2.png");
background-position: 0 0;
height: 600px;
margin: 0 auto;
width: 550px;
}
This should fix it