I have the following HTML:
<div class="shimmer">
<img src="someImage">
<img src="otherImage">
</div>
CSS:
.shimmer img{
color: grey;
display:inline-block;
-webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
background-repeat: no-repeat;
animation: shimmer 3s infinite;
}
#keyframes shimmer {
100% {-webkit-mask-position:left}
}
A simple shimmer effect on the images.
When I open the HTML archive locally with Firefox or Chrome, it works perfectly fine. However, when I modify the internet webpage, the effect works fine in Chrome, but it doesn't appear in Firefox or mobile.
Help? I've been messing around with this for an hour and can't come up with the error. Thank you for your time.
It's because -webkit does not work in Firefox. But Firefox supports the mask property.
For example: You could declare all fallback properties.
div {
-webkit-mask: bla;
mask: bla;
}
Also see docs about the mask feature. At the bottom of the page you can see the supported browser.
https://developer.mozilla.org/en-US/docs/Web/CSS/mask
.shimmer img {
color: grey;
display: inline-block;
-webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 50%) right / 300% 100%;
mask: linear-gradient(-60deg, #000 30%, #0005, #000 50%) right / 300% 100%;
background-repeat: no-repeat;
animation: shimmer 3s infinite;
}
#keyframes shimmer {
0% {
-webkit-mask-position: 140% 140%;
mask-position: 140% 140%;
}
100% {
-webkit-mask-position: -20% -20%;
mask-position: -20% -20%;
}
}
<div class="shimmer">
<img src="https://i.stack.imgur.com/Sbpt3.jpg">
<img src="https://i.stack.imgur.com/Sbpt3.jpg">
</div>
(Tested in Chrome 95 and Firefox 94)
I also optimized your animation a bit by moving the mask outside for a smoother effect.
I'm making a diaporama in pure css, and so far so good, however each pic changes to the other abruptly and i'm trying to make the change gradual (one pic disapearing slowly while the other appears).
I've tried with all timing functions (except cubic-bezier since i'm not too sure how to use it yet) and it hasn't worked.
How to make the changes gradual? I've seen someone doing it with only css3 but I haven't been able to reproduce it.
Here is the css and the html
.diapo {
width: 350px;
height: 150px;
border: 3px solid #544B4D;
background-image: url("http://via.placeholder.com/350x150/F00");
background-size: 350px 150px;
animation-name: diapo1;
animation-duration: 9s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}
#keyframes diapo1 {
0% {
background-image: url("http://via.placeholder.com/350x150/F00");
}
33% {
background-image: url("http://via.placeholder.com/350x150/0F0");
}
66% {
background-image: url("http://via.placeholder.com/350x150/00F");
}
}
<body>
<div class="diapo">
</div>
</body>
Thanks for any answer!
IMO, the best solution is to use multiple img in the DOM combined with some opacity animations:
.container {
position: relative;
/* Define size on the container: (best if aligned with images size) */
width: 350px;
height: 150px;
box-sizing: content-box;
/* fancy stuff, not required */
border: 1px solid #000;
border-radius: 5px;
overflow: hidden;
}
.container > img {
height: inherit;
width: inherit;
/* images are stacked on top of each other */
position: absolute;
top: 0;
left: 0;
opacity: 0;
/* 10s is total time (time for a complete cycle) */
animation: fadeInOut 10s infinite;
}
.container > img:nth-child(2) {
animation-delay: 3.33s; /* totalTime * 1/3 */
}
.container > img:nth-child(3) {
animation-delay: 6.66s; /* totalTime * 2/3 */
}
/* choose a % of anim time allocated to transition,
let's call it transTime. Here it's 10%. */
#keyframes fadeInOut {
0% {
opacity: 0;
}
/* transTime */
10% {
opacity: 1;
}
/* transTime + (100% / image count) */
43% {
opacity: 1;
}
/* previous + transTime */
53% {
opacity: 0;
}
}
<div class="container">
<img src="http://via.placeholder.com/350x150/F00"/>
<img src="http://via.placeholder.com/350x150/0F0"/>
<img src="http://via.placeholder.com/350x150/00F"/>
</div>
I strongly advise you to use a preprocessor that allow variables and loops (maybe SCSS or Less) to generate the nth-child section and even the animation block
I don't know that most browser can interprete a change in background-image gradually... How can they interprete that change ? Should it mean the picture slides from the top, should it mean a fade out/fade in, should it mean a fade in of the new picture above the old one ?
I think you'd need to animate a fade out/in (The code below might not work as is, it is just to give you an idea) :
#keyframes diapo1 {
0% {
background-image: url("pics-about-us/a-u1.jpeg");
}
30% { opacity:1;}
33% {
background-image: url("pics-about-us/a-u3.jpeg");
opacity:0;
}
36% {opacity:1}
//etc...
If you want to do it with a gradual change over the whole animation, I would use on <div> child per background image and animate each individually.
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.
I need to deal with language like Myanmar, its characters are very much larger compare to other language like English. since then its line-height calculated by browser is even more large, that parts of the caret is out of the div border.
So I need a way to cause the caret to hold to its height unchanged from language to language. like you have Myanmar and English in same line, and the caret will hold on to 50px while moving from the left to the right. Or you can say that I'm trying to find a way to disable the browser's default behavior of calculating the height of the caret.
by the way, this only deal with opera presto, it's well performed on chrome or webkit.
I do not think I get the final perfect solution, but it's really a way to solve this problem somehow.
I use a child div with a blinking animation to simulate the browser's caret, and make the father div a pure div. here is the css code.
Here is the Github project which I think help me a lot.
https://gist.github.com/navinpai/2902229
.cursor {
width: 1px;
height: 80px;
display: block;
position: relative;
margin-left: 30px;
animation-name: see_likes;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: running;
animation-delay: 0s;
-o-animation-name: see_likes;
-o-animation-duration: 1s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
-o-animation-play-state: running;
-o-animation-delay: 0s;
}
#keyframes see_likes {
0% { background: #0a0 }
47% { background: #090 }
50% { background: transparent }
97% { background: transparent }
100% { background: #090 }
}
#-o-keyframes see_likes {
0% { background: #0a0 }
47% { background: #090 }
50% { background: transparent }
97% { background: transparent }
100% { background: #090 }
}
I have done a simple three image transition animation code. The code can be found here:
http://jsfiddle.net/harshithjv/AF3Jj/
This code works only on chrome and chromium browsers. It does not work on Apple's Safari browser also. Also it does not work on any other browsers(I tested on Firefox and IE9, not tried Opera).
I guess that I am missing something on animation shorthand property. Please help me out.
Edit:
I am updating with the code for some clarity, which I should have done in first place.
HTML Code:
<div class="animated_star"></div>
CSS3 Code:
#-moz-keyframes shining_star {
from {
background-image: url('http://findicons.com/icon/download/162253/star_grey/16/ico');
}
50% {
background-image: url('http://findicons.com/icon/download/181769/star_half/16/ico');
}
to {
background-image: url('http://findicons.com/icon/download/159919/star/16/ico');
}
}
#-webkit-keyframes shining_star {
from {
background-image: url('http://findicons.com/icon/download/162253/star_grey/16/ico');
}
50% {
background-image: url('http://findicons.com/icon/download/181769/star_half/16/ico');
}
100% {
background-image: url('http://findicons.com/icon/download/159919/star/16/ico');
}
}
#keyframes shining_star {
from{
background-image: url('http://findicons.com/icon/download/162253/star_grey/16/ico');
}
50% {
background-image: url('http://findicons.com/icon/download/181769/star_half/16/ico');
}
to {
background-image: url('http://findicons.com/icon/download/159919/star/16/ico');
}
}
.animated_star{
height: 16px;
width: 16px;
float: left;
-webkit-animation: shining_star 1s infinite; /* works only for Chrome/Chromium */
-moz-animation: shining_star 1s infinite;
animation: shining_star 1s infinite;
}
Background image isn't a property that can be animated - you can't tween the property.
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.
also
It works in Chrome 19!
So at some point in the future, keyframes could really be... frames!
You are living in the future ;)
After some research on this, I figured that background-image CSS property is not supported inside keyframes in most browsers. It must be because of loading too many images dynamically can lead to performance issues if larger images are loaded.
Thanks to #Morpheus for another stackoverflow link(http://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations), through which I decided to resolve the issue through image sprites and reposition(using CSS property - background-position) within that sprite to select the image as I want it. The problem with background-position CSS property is that when it applied for CSS animation through keyframes, the reposition shows the movement within image sprite. But I wanted to show 3 stars transition quickly without movement in three frames. To make that possible, I had to use 6 keyframes where first star's position will be set in 0% and 33%, second star's position will be set in 34% and 66% and the third star will be set in 67% and 100%.
I have created a jsFiddle which does not have image sprites of same stars. I could not locate sprite for same stars online and so I used alternate stars. Its not a perfect example since it has sloppy animation, but I have created a smaller sprite image (48px x 16px) on my system, and animation looks good enough.
HTML Code:
<div class="animated_star"></div>
CSS Code:
#-moz-keyframes shining_star {
0% { background-position: -135px 0px; }
33% { background-position: -135px 0px; }
34% { background-position: -135px -260px; }
66% { background-position: -135px -260px; }
67% { background-position: -270px -260px; }
100% { background-position: -270px -260px; }
}
#-webkit-keyframes shining_star {
0% { background-position: -135px 0px; }
33% { background-position: -135px 0px; }
34% { background-position: -135px -260px; }
66% { background-position: -135px -260px; }
67% { background-position: -270px -260px; }
100% { background-position: -270px -260px; }
}
#keyframes shining_star {
0% { background-position: -135px 0px; }
33% { background-position: -135px 0px; }
34% { background-position: -135px -260px; }
66% { background-position: -135px -260px; }
67% { background-position: -270px -260px; }
100% { background-position: -270px -260px; }
}
.animated_star{
height: 130px;
width: 135px;
float: left;
background: transparent url('http://azmind.com/wp-content/uploads/2011/11/social-star-icons.png') no-repeat fixed;
background-position: 0px -390px;
-webkit-animation: shining_star .5s infinite linear;
-moz-animation: shining_star .5s infinite linear;
animation: shining_star .5s infinite linear;
}
The jsFiddle link: http://jsfiddle.net/harshithjv/7QvSP/2/