I have a background image for animation.
How can i do endless animation ?
(If animation goes right side of page , i want to see it in appear in left side of page)
The original code from David Walsh - CSS Background Animations
#keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
#animate-area {
width: 560px;
height: 400px;
background-image: url(https://davidwalsh.name/demo/bg-clouds.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
}
<div id="animate-area"></div>
I posted this because you said left to right.
You can use something like this.
#horizontal-scroll {
width: 1439px;
height: 1170px;
background: black url(https://assets.periscope.tv/images/map.svg);
-webkit-animation: backgroundScroll 50s linear infinite;
animation: backgroundScroll 50s linear infinite;
}
#-webkit-keyframes backgroundScroll {
from {
background-position: -1439px 0;
}
to {
background-position: 0 0;
}
}
#keyframes backgroundScroll {
from {
background-position: -1439px 0;
}
to {
background-position: 0 0;
}
}
<div id="horizontal-scroll"></div>
#keyframes customname
{
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
classname
{
background-image: url(Url of tyour file);
width: width of the file;
height: Height of the file;
background-position: 0px 0px;
background-repeat: repeat-x; //Repeating through X axis only
animation: customname 40s linear infinite;
}
Related
I am trying to add a background animation that will move from right to left and will loop cleanly. So far the animation works from right to left using keyframes but after 30s it stops and starts all over again. It doesn’t look very clean and smooth. Is there any alternative solution for this?
body:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-image: url("/media/background.svg");
background-position: 0px;
background-repeat: repeat-x;
background-size: cover;
animation-name: slide;
animation-duration: 30s;
animation-iteration-count: infinite;
}
#keyframes slide {
0% { background-position: 0 0; }
100% { background-position: -4000px 0; }
}
Change the 50% keyframe to be the 100% keyframe, and set the end background position to -100vw.
body:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-image: url("https://picsum.photos/1200/1200");
background-position: 0px;
background-repeat: repeat-x;
background-size: cover;
animation-name: slide;
animation-duration: 10s;
animation-iteration-count: infinite;
}
#keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: -100vw 0;
}
}
And the same idea with animation-timing-function: linear:
body:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-image: url("https://picsum.photos/1200/1200");
background-position: 0px;
background-repeat: repeat-x;
background-size: cover;
animation-name: slide;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: -100vw 0;
}
}
So I am creating a widget for streamlabs, currently I am trying to figure out how to animate the css "background: linear-gradient(#cf8888 -5%, #df4747 100%);" according to the % of the height from this div. The javascript already controls the height of the div according to the "goals" current.
Any suggestions where I should start to animate this BG?
IE example:
<div class="goal-start"></div>
#goal-start{
position: absolute;
background: linear-gradient(#cf8888 -5%, #df4747 100%);
width: 100%;
bottom: 0;
left: 0;
z-index: -1;
CSS
.goal-start{
width:100%;
height:100vh;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab );
background-size: 400% 400%;
-webkit-animation: gradientBG 10s ease infinite;
animation: gradientBG 10s ease infinite;
}
#-webkit-keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
HTML code:
<div class="goal-start"></div>
I'm creating a crossfade fullscreen slideshow on my webpage with HTML and CSS, however it's not working well.
I could create crossfading on background images, but there is a problem.
In first loading, there are white flickers between each images.
I don't want to avoid white flickers.
How can I fix them?
I've wrote with HTML and CSS to create a crossfade slideshow.
<body>
<div class="slideshow">
</div>
</body>
body {
margin: 0;
padding: 0;
}
.slideshow {
height: 100vh;
weight: 100%;
background-image: url('../images/1.jpg');
background-size: cover;
animation: slide 24s infinite;
}
#keyframes slide {
25% {
background-image: url('../images/2.jpg');
background-size: cover;
}
50% {
background-image: url('../images/3.jpg');
background-size: cover;
}
75% {
background-image: url('../images/4.jpg');
background-size: cover;
}
}
I don't need white flickers and apply a beautiful crossfade slideshow.
Flickers happen because the browser paints a new image, probably.
Try creating individual <div>s for each slide, position them absolute, and simply fade each of them away.
<body>
<div class="slideshow">
<div class="slide slide-1"></div>
<div class="slide slide-2"></div>
<div class="slide slide-3"></div>
<div class="slide slide-4"></div>
</div>
</body>
.slideshow {
position: relative;
width: 100vw; height: 100vh;
}
.slide {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0; /* makes it full size */
opacity: 0;
transition: opacity 1s;
background-size: cover;
background-position: center;
}
.slide.active {
opacity: 1;
}
With CSS only:
#keyframes slide-1 {
0% , 40% , 100% { opacity: 0; }
20% { opacity: 1; }
}
#keyframes slide-2 {
0% , 20% , 60% , 100% { opacity: 0; }
40% { opacity: 1; }
}
#keyframes slide-3 {
0% , 40% , 80% , 100% { opacity: 0; }
60% { opacity: 1; }
}
#keyframes slide-4 {
0% , 60% , 100% { opacity: 0; }
80% { opacity: 1; }
}
.slide-1 { animation: slide-1 24s infinite; background-image: url('../images/1.jpg'); }
.slide-2 { animation: slide-2 24s infinite; background-image: url('../images/2.jpg'); }
.slide-3 { animation: slide-3 24s infinite; background-image: url('../images/3.jpg'); }
.slide-4 { animation: slide-4 24s infinite; background-image: url('../images/4.jpg'); }
Or with JS:
setInterval(function(){
var current = document.querySelector('.slide.active');
if (current.nextElementSibling) {
current.nextElementSibling.classList.add('active');
} else {
current.parentElement.firstElementChild.classList.add('active');
};
current.classList.remove('active');
}, 6000);
Is there any way(with css) to pause the sprite after last step for a one or more seconds ? I have tried to add one more step or the same bg-position from 80% to 100% but it didnt work.
.sprite {
animation: anim 2000ms steps(16) infinite;
background: url(http://i.imgur.com/9FprJ5C.png) left center no-repeat;
height: 45px;
width: 90px;
}
#keyframes anim {
0% {
background-position: 0px 0;
}
80% {
background-position: -1440px 0px;
}
100% {
background-position: -1440px 0px;
}
}
<div class="sprite"></div>
Have you tried making the animation reach the end by 50%? i.e. after 1 second so that from 50%-100% it pauses:
#keyframes anim {
0% {
background-position: 0px 0;
}
50% {
background-position: -1440px 0px;
}
100% {
background-position: -1440px 0px;
}
}
.sprite {
animation: anim 2000ms steps(16) infinite;
background: url(http://i.imgur.com/9FprJ5C.png) left center no-repeat;
height: 45px;
width: 90px;
}
#keyframes anim {
0% {
background-position: 0px 0;
}
50% {
background-position: -1440px 0px;
}
100% {
background-position: -1440px 0px;
}
}
<div class="sprite"></div>
this is my code:
<header>
<div id='animate-area'>
</div>
</header>
css:
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#-moz-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#animate-area {
height: 145px;
background-image: url(http://s10.postimg.org/noxw294zd/banner.png);
animation: animatedBackground 40s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
This is JsFIDDLE: http://jsfiddle.net/6d6xa65n/
When run this image-src="img/banner.png" it will show different output. but when i add image src="http://s10.postimg.org/noxw294zd/banner.png", it shows something different from actual output, after completing one time of rotation, need to start from left. and need to remove space left and right side of image.
How to fix this? Can someone help me with us?
This is image i used http://imgur.com/FDbmms0
If I got it right, you need to make these changes:
To remove extra space:
body {
margin: 0;
padding: 0;
}
To make your image rotate back and forth:
#keyframes animatedBackground {
0% { background-position: 0 0; }
50% { background-position: 100% 0; }
100% { background-position: 0 0; }
}
See working demo.
Edit:
I've found this article with basics on how to do the infinite image scroll. But I couldn't make it work with relative width and height (so as author of the technique in his demo), so I've just multiplied original width (1269px) accordingly. Here is the final css:
body {
margin: 0;
padding: 0;
}
#slideshow {
position: relative;
overflow: hidden;
height: 100px;
}
#animate-area {
height: 100%;
width: 2538px;
position: absolute;
left: 0;
top: 0;
background-image: url('http://s10.postimg.org/noxw294zd/banner.png');
animation: animatedBackground 40s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
/* Put your css in here */
#keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-webkit-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-moz-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
So #animate-area is twice as large as image and we just animate to left on full image size. See updated demo.