I am trying to add this animation to my background, but when going on mobile device, the background triples even when I set the background size cover, on pc version it works fine, only one background. Why is this happening?
.main {
background-image: url("~#/assets/main-bg.png");
background-position: center;
background-size: cover;
width: 100%;
height: 100vh;
overflow-y: scroll;
animation: shrink 5s infinite alternate;
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.4);
}
#keyframes shrink {
0% {
background-size: 110%;
}
100% {
background-size: 100%;
}
}
You can keep the cover property if you use scale instead of changing background size. Obviously you don't want the whole of main to scale in and out - only the image - so put that as background on the before pseudo element, set it as cover and to transform between scale 1.1 and 1.
That way you get both effects and it's fully responsive.
.main {
width: 100%;
height: 100vh;
overflow-y: scroll;
position: relative;
}
.main::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
animation: shrink 5s infinite alternate;
background-image: url("https://picsum.photos/id/259/1024/768");
background-position: center;
background-size: cover;
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.4);
}
#keyframes shrink {
0% {
transform: scale(1.1);;
}
100% {
transform: scale(1.0);
}
}
<div class="main"></div>
Add in this css property background-repeat: no-repeat;
This will stop the background image from appearing more than once.
Also, your keyframes changes the background size from cover to 100/110%. Over riding the property.
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 have a 11 frame png spritesheet. When you hover it will play the animation until the last frame and then pause, and when you hover out it will reverse the animation back to the first frame. I have this so far:
.intern {
width: 328px;
height: 187px;
background-image: url("http://i.imgur.com/zNsJCnM.png");
-webkit-animation: in 0.5s steps(11);
}
.intern:hover {
-webkit-animation: out 0.5s steps(11);
}
#-webkit-keyframes in {
from {
background-position: 0px 0px;
}
to {
background-position: 0px -2057px;
}
}
#-webkit-keyframes out {
0% {
background-position: 0px 0px;
}
100% {
background-position: 0px -2057px;
}
}
<div class="intern"></div>
JS Fiddle: http://jsfiddle.net/os2jm4h5/
Can someone help me out? I would like to do this with CSS (no JavaScript please) and preferably should use only one div.
This is possible with a few changes to CSS:
Add background-position: 0px -1683px; to .intern:hover. This will ensure that the animation "pauses" on the final frame. Currently when the hover animation finishes background-position goes back to 0px 0px;.
Reverse background-position in from and to for #-webkit-keyframes in
Reverse background-position in 0% and 100% for#-webkit-keyframes out
.intern {
width: 328px;
height: 187px;
background-image: url("http://i.imgur.com/zNsJCnM.png");
-webkit-animation: in 0.5s steps(11);
}
.intern:hover {
-webkit-animation: out 0.5s steps(11);
background-position: 0px -1683px;
}
#-webkit-keyframes in {
from {
background-position: 0px -2057px;
}
to {
background-position: 0px 0px;
}
}
#-webkit-keyframes out {
0% {
background-position: 0px 0px;
}
100% {
background-position: 0px -2057px;
}
}
<div class="intern"></div>
Note that background-position: 0px -1683px; is used because the last image in the sprite sheet (background-position: 0px -2057px;) is actually a copy of the first frame.
I am animating a line from 0 to 100%.
Keyframe CSS:
#keyframes animate-line {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Line CSS:
.line {
animation: animate-line 5s infinite;
background: none repeat scroll 0px 0px transparent;
border-top: 2px solid rgba(255, 255, 255, 0.5);
display: block;
position: absolute;
z-index: 9;
height: 1px;
-moz-transform: rotate(16deg);
-webkit-transform: rotate(16deg);
transform: rotate(16deg);
left: 20px;
top: 200px;
}
I am using vendor prefixes everywhere in live code, omitted here for readability.
You can see I rotate the line with transform: rotate(); doing that makes the line veer up going from 0 to 100%. I can think logically why it is doing that, I define the left/top properties so I would think it starts at top: 200px and left: 20px and expand as expected but why it still wants to veer up ?
Running demo on jsfiddle
Hopefully someone can point this out, I'm sure its simple.
ANSWER: Just learned about a new property transform-origin: 0 0 thanks to #barrett. It can be useful to animate a rotated line, and if anyone else is doing that using transform-origin: 0; is a huge piece, thanks.
Add this to your stylesheet on .line:
.line {
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
By default it will transform from the center which is why it moves up.
Running demo