New to using CSS animations. Created an animation with 8 pictures for a total animation-duration 100sec. Using keyframes percentages I have the first 6 frames 10sec, 7th frame 30sec, last frame 10sec specifying the pictures using a background-image url. When implemented the pictures fade-in and fade-out very slowly barely accomplishing that in the 10sec time of the frame. The W3schools website I'm learning this from doesn't give any option to speed the fades up or specify a different type of slide transition. I'm not finding answers to this anywhere else on the web. Am I missing something? See code below:
.homeslider {
width: 950px;
height: 400px;
padding-left: 25px;
animation-name: homepics;
animation-duration: 100s;
}
#keyframes homepics {
0% { background-image: url('images/pic1.png'); }
10% { background-image: url('images/pic2.png'); }
20% { background-image: url('images/pic3.png'); }
30% { background-image: url('images/pic4.png'); }
40% { background-image: url('images/pic5.png'); }
50% { background-image: url('images/pic6.png'); }
80% { background-image: url('images/pic7.png'); }
90% { background-image: url('images/pic8.png'); }
}
<div class="homeslider"></div>
background-image is an animatable property so you are getting fading in and out of the images throughout the sequence - at no point does an image 'stay still' with full opacity.
This snippet takes a rather simplistic approach to minimising the transition time between background images - showing an image for nearly 10% in the case of the first few, then transitioning to the next image very quickly.
There are drawbacks to this method - the system doesn't look forward to bring in background images until they are needed, so the first time through there can be quite a flashy gap as it loads the next image. [A 'fix' of running the animation once, potentially out of sight, very quicly to get images loaded in advance has been removed as it didn't seem to be what was wanted].
.homeslider {
width: 950px;
height: 400px;
padding-left: 25px;
animation-name: homepics;
animation-duration: 100s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
#keyframes homepics {
0%,
9.9999% {
background-image: url(https://picsum.photos/id/1015/200/300);
}
10%,
19.9999% {
background-image: url(https://picsum.photos/id/1016/200/300);
}
20%,
29.9999% {
background-image: url(https://picsum.photos/id/1018/200/300);
}
30%,
39.9999% {
background-image: url(https://picsum.photos/id/1019/200/300);
}
40%,
49.9999% {
background-image: url(https://picsum.photos/id/1020/200/300);
}
50%,
79.999% {
background-image: url(https://picsum.photos/id/1021/200/300);
}
80%,
89.999% {
background-image: url(https://picsum.photos/id/1022/200/300);
}
90%,
100% {
background-image: url(https://picsum.photos/id/1023/200/300);
}
}
<div class="homeslider"></div>
There are many other ways of simulating an image slider using pure HTML/CSS - for example having all the images stacked on top of each other and 'moving them' with z-index, or playing with opacities.
In order to illustrate your issue on the site, I created a snippet using background colors instead of images:
.homeslider {
width: 950px;
height: 400px;
padding-left: 25px;
animation-name: homepics;
animation-duration: 100s;
}
#keyframes homepics {
0% { background-color: red; }
10% { background-color: orange; }
20% { background-color: yellow; }
30% { background-color: green; }
40% { background-color: blue; }
50% { background-color: indigo; }
80% { background-color: violet; }
90% { background-color: purple; }
}
<div class="homeslider"></div>
In the below example, I think I resolved your issue by adding additional keyframes right before the threshold of the next change, so that the transition doesn't occur until the last possible moment:
.homeslider {
width: 950px;
height: 400px;
padding-left: 25px;
animation-name: homepics;
animation-duration: 100s;
}
#keyframes homepics {
0% { background-color: red; }
9% { background-color: red; }
10% { background-color: orange; }
19% { background-color: orange; }
20% { background-color: yellow; }
29% { background-color: yellow; }
30% { background-color: green; }
39% { background-color: green; }
40% { background-color: blue; }
49% { background-color: blue; }
50% { background-color: indigo; }
79% { background-color: indigo; }
80% { background-color: violet; }
89% { background-color: violet; }
90% { background-color: purple; }
99% { background-color: purple; }
}
<div class="homeslider"></div>
my #keyframe CSS code seems alright. its not giving error yet its not showing at all on the browser.
the classname on html is img1.
my #keyframe CSS code seems alright. its not giving error yet its not showing at all on the browser.
the classname on html is img1.
somebody help
.img1 {
width: 150px;
animation-name: pics;
animation-duration: 25s;
animation-iteration-count: 1;
background-image: url("assets/pic1.png");
background-repeat: no-repeat;
background-size: 100%;
margin-top: 19px;
margin-bottom: 19px;
}
#keyframes pics {
0% {
background-image: url("assets/pic8.jpg");
}
12.5% {
background-image: url("assets/pic1.png");
}
25% {
background-image: url("assets/pic2.png");
}
37.5% {
background-image: url("assets/pic3.jpg");
}
50% {
background-image: url("assets/pic4.jpg");
}
62.5% {
background-image: url("assets/pic5.jpg");
}
75% {
background-image: url("assets/pic6.jpg");
}
87.5% {
background-image: url("assets/pic7.jpg");
}
100% {
background-image: url("assets/pic8.jpg");
}
}
Your animation is working, but as #Yudiz says you need to set a height to your .img1 element.
background-image property is setting a background image to your element, but il will not change his size depending of your background-image size. Right now, your .img1 element is 150px large, and 0px tall, so it's invisible.
I am trying to create a sort of slideshow with CSS. I set several background images which gradually fade in one after another.
What I cannot do, though, is setting an interval of some seconds between an image and the other one, so they do not start fading as soon they are fully rendered.
I do not want to include JQuery otherwise the project would be already complicated since I am already using React. Any ideas?
CSS
.App {
text-align: center;
background-size: initial;
animation: animatedBird 60s infinite;
}
#keyframes animatedBird {
0% { background-image: url('../images/arch1.jpg');}
25% { background-image: url('../images/computer.jpg');}
50% { background-image: url('../images/arch2.jpg');}
75% { background-image: url('../images/computer.jpg');}
100% { background-image: url('../images/arch1.jpg');}
}
An idea is to initially load all the images using multiple background so that you won't have any delay on the animation:
body {
background-image:
url('https://picsum.photos/800/800?image=1040'), /*put the first one on the Top*/
url('https://picsum.photos/800/800?image=1069'),
url('https://picsum.photos/800/800?image=1042');
background-size:cover;
animation: animatedBird 10s infinite;
}
#keyframes animatedBird {
0% {
background-image: url('https://picsum.photos/800/800?image=1040');
}
25% {
background-image: url('https://picsum.photos/800/800?image=1069');
}
50% {
background-image: url('https://picsum.photos/800/800?image=1042');
}
75% {
background-image: url('https://picsum.photos/800/800?image=1069');
}
100% {
background-image: url('https://picsum.photos/800/800?image=1040');
}
}
Here is without intial load to see the difference:
body {
background-size:cover;
animation: animatedBird 10s infinite;
}
#keyframes animatedBird {
0% {
background-image: url('https://picsum.photos/800/800?image=1041');
}
25% {
background-image: url('https://picsum.photos/800/800?image=1068');
}
50% {
background-image: url('https://picsum.photos/800/800?image=1043');
}
75% {
background-image: url('https://picsum.photos/800/800?image=1068');
}
100% {
background-image: url('https://picsum.photos/800/800?image=1041');
}
}
UPDATE
And to keep the image for a period of time you can try this:
body {
background-image:
url('https://picsum.photos/800/800?image=1040'), /*put the first one on the Top*/
url('https://picsum.photos/800/800?image=1069'),
url('https://picsum.photos/800/800?image=1042');
background-size:cover;
animation: animatedBird 10s infinite;
}
#keyframes animatedBird {
0%,20% {
background-image: url('https://picsum.photos/800/800?image=1040');
}
25%,45% {
background-image: url('https://picsum.photos/800/800?image=1069');
}
50%,70% {
background-image: url('https://picsum.photos/800/800?image=1042');
}
75%,95% {
background-image: url('https://picsum.photos/800/800?image=1069');
}
100% {
background-image: url('https://picsum.photos/800/800?image=1040');
}
}
You can try this:
body {
animation: animatedBird 10s infinite;
}
#keyframes animatedBird {
0%, 25% {
background-image: url('https://picsum.photos/800/800?image=1082');
}
50%, 75% {
background-image: url('https://picsum.photos/800/800?image=1083');
}
100% {
background-image: url('https://picsum.photos/800/800?image=1082');
}
}
I'm making a CSS3-animation of a desk with a blinking lamp using a spritesheet with only two different sprites. The problem is, that the animation when using percent instead from "from" and "to" causes the entire image to blink, even though the animation runs as it should.
It works fine when I use this:
background: url("../img/desk.svg");
background-size: auto 200%;
background-repeat: no-repeat;
background-position: 0 0;
-webkit-animation: desk 5s steps(2) infinite;
#-webkit-keyframes {
from {
background-position: 0 0;
}
to {
background-position: 0 200%;
}
}
But when using this, the image blinks. The animaton itself works as it should though:
#-webkit-keyframes desk {
0% {
background-position: 0 0%;
}
10% {
background-position: 0 200%;
}
15% {
background-position: 0 0%;
}
20% {
background-position: 0 200%;
}
25% {
background-position: 0 0%;
}
100% {
background-position: 0 200%;
}
}
I am clueless to why this happens, as I'm using a spritesheet, and the image wont have to load every time.
Hope someone can help me out :)
try:
background: url("../img/desk.svg");
background-size: auto 200%;
background-repeat: no-repeat;
background-position: 0 0;
-webkit-animation: desk 5s steps(2) infinite;
#-webkit-keyframes desk{
from {
background-position: 0 0;
}
to {
background-position: 0 200%;
}
}
Why this isn't working? What am I doing wrong?
CSS
#-webkit-keyframes test {
0% {
background-image: url('frame-01.png');
}
20% {
background-image: url('frame-02.png');
}
40% {
background-image: url('frame-03.png');
}
60% {
background-image: url('frame-04.png');
}
80% {
background-image: url('frame-05.png');
}
100% {
background-image: url('frame-06.png');
}
}
div {
float: left;
width: 200px;
height: 200px;
-webkit-animation-name: test;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
}
DEMO
http://jsfiddle.net/hAGKv/
Updated for 2020: Yes, it can be done! Here's how.
Snippet demo:
#mydiv{ animation: changeBg 1s infinite; width:143px; height:100px; }
#keyframes changeBg{
0%,100% {background-image: url("https://i.stack.imgur.com/YdrqG.png");}
25% {background-image: url("https://i.stack.imgur.com/2wKWi.png");}
50% {background-image: url("https://i.stack.imgur.com/HobHO.png");}
75% {background-image: url("https://i.stack.imgur.com/3hiHO.png");}
}
<div id='mydiv'></div>
Background image [isn't a property that can be animated][1] - you can't tween the property.
Original Answer: (still a good alternative)
Instead, try laying out all the images on top of each other using position:absolute, then animate the opacity of all of them to 0 except the one you want repeatedly.
It works in Chrome 19.0.1084.41 beta!
So at some point in the future, keyframes could really be... frames!
You are living in the future ;)
Works for me.
Notice the use of background-image for transition.
#poster-img {
background-repeat: no-repeat;
background-position: center;
position: absolute;
overflow: hidden;
-webkit-transition: background-image 1s ease-in-out;
transition: background-image 1s ease-in-out;
}
This is really fast and dirty, but it gets the job done: jsFiddle
#img1, #img2, #img3, #img4 {
width:100%;
height:100%;
position:fixed;
z-index:-1;
animation-name: test;
animation-duration: 5s;
opacity:0;
}
#img2 {
animation-delay:5s;
-webkit-animation-delay:5s
}
#img3 {
animation-delay:10s;
-webkit-animation-delay:10s
}
#img4 {
animation-delay:15s;
-webkit-animation-delay:15s
}
#-webkit-keyframes test {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
}
}
#keyframes test {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
}
}
I'm working on something similar for my site using jQuery, but the transition is triggered when the user scrolls down the page - jsFiddle
I needed to do the same thing as you and landed on your question. I ended up taking finding about the steps function which I read about from here.
JSFiddle of my solution in action (Note it currently works in Firefox, I'll let you add the crossbrowser lines, trying to keep the solution clean of clutter)
First I created a sprite sheet that had two frames. Then I created the div and put that as the background, but my div is only the size of my sprite (100px).
<div id="cyclist"></div>
#cyclist {
animation: cyclist 1s infinite steps(2);
display: block;
width: 100px;
height: 100px;
background-image: url('../images/cyclist-test.png');
background-repeat: no-repeat;
background-position: top left;
}
The animation is set to have 2 steps and have the whole process take 1 second.
#keyframes cyclist {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -202px; //this should be cleaned up, my sprite sheet is 202px by accident, it should be 200px
}
}
Thiago above mentioned the steps function but I thought I'd elaborate more on it. Pretty simple and awesome stuff.
Your code can work well with some adaptations :
div {
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: contain;
animation: animateSectionBackground infinite 240s;
}
#keyframes animateSectionBackground {
00%, 11% { background-image: url(/assets/images/bg-1.jpg); }
12%, 24% { background-image: url(/assets/images/bg-2.jpg); }
25%, 36% { background-image: url(/assets/images/bg-3.jpg); }
37%, 49% { background-image: url(/assets/images/bg-4.jpg); }
50%, 61% { background-image: url(/assets/images/bg-5.jpg); }
62%, 74% { background-image: url(/assets/images/bg-6.jpg); }
75%, 86% { background-image: url(/assets/images/bg-7.jpg); }
87%, 99% { background-image: url(/assets/images/bg-8.jpg); }
}
Here is the explanation of the percentage to suit your situation:
First you need to calculate the "chunks". If you had 8 differents background, you need to do :
100% / 8 = 12.5% (to simplify you can let fall the decimals) => 12%
After that you obtain that :
#keyframes animateSectionBackground {
00% { background-image: url(/assets/images/bg-1.jpg); }
12% { background-image: url(/assets/images/bg-2.jpg); }
25% { background-image: url(/assets/images/bg-3.jpg); }
37% { background-image: url(/assets/images/bg-4.jpg); }
50% { background-image: url(/assets/images/bg-5.jpg); }
62% { background-image: url(/assets/images/bg-6.jpg); }
75% { background-image: url(/assets/images/bg-7.jpg); }
87% { background-image: url(/assets/images/bg-8.jpg); }
}
If you execute this code, you will see the transition will be permanantly. If you want the backgrounds stay fixed while a moment, you can do like this :
#keyframes animateSectionBackground {
00%, 11% { background-image: url(/assets/images/bg-1.jpg); }
12%, 24% { background-image: url(/assets/images/bg-2.jpg); }
25%, 36% { background-image: url(/assets/images/bg-3.jpg); }
37%, 49% { background-image: url(/assets/images/bg-4.jpg); }
50%, 61% { background-image: url(/assets/images/bg-5.jpg); }
62%, 74% { background-image: url(/assets/images/bg-6.jpg); }
75%, 86% { background-image: url(/assets/images/bg-7.jpg); }
87%, 99% { background-image: url(/assets/images/bg-8.jpg); }
}
That mean you want :
bg-1 stay fixed from 00% to 11%
bg-2 stay fixed from 12% to 24%
etc
By putting 11%, the transtion duration will be 1% (12% - 11% = 1%).
1% of 240s (total duration) => 2.4 seconds.
You can adapt according to your needs.
The linear timing function will animate the defined properties linearly. For the background-image it seems to have this fade/resize effect while changing the frames of you animation (not sure if it is standard behavior, I would go with #Chukie B's approach).
If you use the steps function, it will animate discretely. See the timing function documentation on MDN for more detail. For you case, do like this:
-webkit-animation-timing-function: steps(1,end);
animation-timing-function: steps(1,end);
See this jsFiddle.
I'm not sure if it is standard behavior either, but when you say that there will be only one step, it allows you to change the starting point in the #keyframes section. This way you can define each frame of you animation.
Like the above stated, you can't change the background images in the animation. I've found the best solution to be to put your images into one sprite sheet, and then animate by changing the background position, but if you're building for mobile, your sprite sheets are limited to less than 1900x1900 px.
I needed to do the same thing recently. Here's a simple implementation
#wrapper { width:100%; height:100%; position:relative; }
#wrapper img { position:absolute; top:0; left:0; width:100%; height:auto; display:block; }
#wrapper .top { animation:fadeOut 2s ease-in-out; animation-fill-mode:forwards; }
#keyframes fadeOut {
0% { opacity:1; }
100% { opacity:0; }
}
<div id="wrapper">
<img src="img1.jpg" class="top" style="z-index:2;">
<img src="img2.jpg" style="z-index:1;">
</div>
You can use animated background-position property and sprite image.
You can follow by this code:
#cd{
position: relative;
margin: 0 auto;
height: 281px;
width: 450px;
}
#cf img{
left: 0;
position: absolute;
-moz-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover{
opacity: 0;
}
<div id="cf">
<img class="button" src="Birdman.jpg" />
<img src="Turtle.jpg" class="top" />
</div>
You can use the jquery-backstretch image which allows for animated slideshows as your background-images!
https://github.com/jquery-backstretch/jquery-backstretch
Scroll down to setup and all of the documentation is there.
Well I can change them in chrome. Its simple and works fine in Chrome using -webkit css properties.