I am trying to create a slideshow as background but it does not work in Firefox. The image change but there is not the specified transition.
.main-page {
width: 100%;
height: 100vh;
animation: animate 15s ease-in-out infinite;
-webkit-animation: animate 15s ease-in-out infinite;
-moz-animation: animate 15s ease-in-out infinite;
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
background-size: cover;
}
#keyframes animate {
0%,
100% {
background-image: url(/img/001.jpg);
}
50% {
background-image: url(/img/002.jpg);
}
}
Checking inspector and I can see that the following is active:
-webkit-animation: animate 15s ease-in-out infinite;
What do I do wrong?
Thanks.
It seems that FF and Chrome interpret animation between background images differently. Chrome continuously fading one out while fading the next one in (as with background color) but FF just shows one, then the other.
One way round this for the two image situation shown in the question is to put the background images on before and after pseudo elements and use CSS animations to fade them in and out using opacity which FF does treat as animatable.
Here's a simple example as demo:
.main-page {
width: 100%;
height: 100vh;
}
.main-page::before,
.main-page::after {
width: 100%;
height: 100%;
position: absolute;
content: '';
top: 0;
left: 0;
animation: animate 15s ease-in-out infinite;
-webkit-animation: animate 15s ease-in-out infinite;
-moz-animation: animate 15s ease-in-out infinite;
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
background-size: cover;
}
.main-page::before {
background-image: url(https://picsum.photos/id/1015/200/300);
}
.main-page::after {
background-image: url(https://picsum.photos/id/1016/200/300);
animation-delay: 7.5s;
}
#keyframes animate {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="main-page"></div>
Related
I want to blink my bg image using css.
It should blink quickly and I have no idea how to do it.
I can only use HTML and CSS.
header {
width: 100%;
height: 100vh;
background-image : url('bg.jpg');
animation: blinkingBackground 2s infinite;
background-position: right bottom, left top;
background-size: cover;
background-repeat: no-repeat;
font-family: 'Dosis', sans-serif;
}
I have also added
animation: blinkingBackground 2s infinite;
but it's not working.
#Ahmad's solution is good, but it doesn't fade in smoothly. So I made a code which makes the blinking smoother.
.html_bg {
background-image: url(https://cdn.arstechnica.net/wp-content/uploads/2020/09/macOSBigSur.jpg);
animation: blink 1.5s infinite;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#keyframes blink {
50% {
opacity: 0;
}
}
<div class="html_bg">
<!--Put your content here-->
</div>
I made the opacity change to zero at 50% so that the opacity can change back to 1 smoothly.
Do you need something like this?
.html_image {
background-image: url('https://i.picsum.photos/id/686/536/354.jpg?hmac=nQKjRmIoZtUkWvI-wNF8RFNW89VHuPIPT2muuPPL3QY');
height: 200px;
animation: blink 1s infinite;
}
#keyframes blink {
50% {
opacity: 0;
}
}
<div class="html_image">
</div>
Working Fiddle
I'm trying to change a background animation of a div using CSS animations, however, I am not able to make the transition smooth.
Any idea on how to do it? Here is my code.
.cover {
height: 200px;
width: 200px;
background-image: url('https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1562&q=80');
animation: mymove 5s;
animation-delay: 5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
#keyframes mymove {
from {
background-image: url('https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1562&q=80');
}
to {
background-image: url('https://images.unsplash.com/photo-1582480356444-60ca00301659?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80');
}
<div class="cover">
</div>
What am I doing wrong here?
The normal background change has no animation. What you can do is the following:
You decrease the opacity of the background, change the background image and increase the opacity again. This will achieve a fade effect.
.cover {
height: 200px;
width: 200px;
background-image: url('https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1562&q=80');
animation: mymove 5s;
animation-delay: 5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
#keyframes mymove {
0% { background-image: url('https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1562&q=80'); }
50% { background-color:rgba(0, 0, 0, 0.5); }
51% { background-image: url('https://images.unsplash.com/photo-1582480356444-60ca00301659?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80'); }
100% { background-color:rgba(0, 0, 0, 1); }
<div class="cover">
</div>
I think the best option is to add a transition to your background image, so if you change it, there will be a animation. (In this example I used the :hover event)
.cover {
height: 200px;
width: 200px;
background-image: url('https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1562&q=80');
transition: background-image 5s ease-in-out;
}
.cover:hover{
background-image: url('https://images.unsplash.com/photo-1582480356444-60ca00301659?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80');
}
<div class="cover">
</div>
I want to create animation like progressbar for that I have written following code
My code
.box {
width: 26px;
height: 10px;
display: inline-block;
background-size: 200% 100%;
background-image: linear-gradient(to left, red 50%, black 50%);
-webkit-animation: progressbar 1s ease infinite;
-moz-animation: progressbar 1s ease infinite;
-o-animation: progressbar 1s ease infinite;
animation: progressbar 1s ease infinite;
}
#-webkit-keyframes progressbar {
0% {
opacity: 1;
background-position: 0 0;
}
100% {
opacity: 1;
background-position: -100% 0;
}
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
My problem is all animation working at same time I want to add animation one bye one after one finishes in infinite loop like progress bar. Can animation-timing-function: linear, steps(3, end); will helps? Please help me in this. Thanks
you can set animation-delay but for that, you'll need to remove the !important
also if there's an N amount of boxes you can add the style using JS or SCSS loop.
.box {
width: 26px;
height: 10px;
display: inline-block;
background-size: 200% 100%;
background-image: linear-gradient(to left, red 50%, black 50%);
-webkit-animation: progressbar 1s ease infinite;
-moz-animation: progressbar 1s ease infinite;
-o-animation: progressbar 1s ease infinite;
animation: progressbar 1s ease infinite;
}
.box:nth-child(2) {
animation-delay: 1s;
}
.box:nth-child(3) {
animation-delay: 2s;
}
#-webkit-keyframes progressbar {
0% {
opacity: 1;
background-position: 0 0;
}
100% {
opacity: 1;
background-position: -100% 0;
}
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
if you wanted each one to stop before restarting you can do this:
.box {
width: 26px;
height: 10px;
display: inline-block;
background-size: 200% 100%;
background-image: linear-gradient(to left, red 50%, black 50%);
-webkit-animation: progressbar 3s ease infinite;
-moz-animation: progressbar 3s ease infinite;
-o-animation: progressbar 3s ease infinite;
animation: progressbar 3s ease infinite;
}
.box:nth-child(2) {
animation-name: progressbar1;
}
.box:nth-child(3) {
animation-name: progressbar2;
}
#-webkit-keyframes progressbar {
0% {
background-position: 0 0;
}
33%,
100% {
background-position: -100% 0;
}
}
#-webkit-keyframes progressbar1 {
0%,
33% {
background-position: 0 0;
}
66%,
100% {
background-position: -100% 0;
}
}
#-webkit-keyframes progressbar2 {
0%,
66% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
If you simply want the visual effect, here is an idea with one element and one animation
.box {
width: 100px;
height: 10px;
background:
linear-gradient(#fff,#fff) 32% 0,
linear-gradient(#fff,#fff) 68% 0,
linear-gradient(red, red),
black;
background-repeat:no-repeat;
background-size:5px 100%,5px 100%,0% 100%;
animation: progressbar 1s ease infinite;
}
#keyframes progressbar {
100% {
background-size:5px 100%,5px 100%,100% 100%;
}
}
<div class="box"></div>
If you want transparency we can add mask:
.box {
width: 100px;
height: 10px;
background:
linear-gradient(red, red) no-repeat,
black;
background-size:0% 100%;
-webkit-mask:
linear-gradient(#fff,#fff) left,
linear-gradient(#fff,#fff) center,
linear-gradient(#fff,#fff) right;
-webkit-mask-size:30% 100%;
-webkit-mask-repeat:no-repeat;
mask:
linear-gradient(#fff,#fff) left,
linear-gradient(#fff,#fff) center,
linear-gradient(#fff,#fff) right;
mask-size:30% 100%;
mask-repeat:no-repeat;
animation: progressbar 1s ease infinite;
}
#keyframes progressbar {
100% {
background-size:100% 100%;
}
}
body {
background:pink;
}
<div class="box"></div>
I've got a an image I'm using as a background that is animated in CSS, but it is push all of my content to the bottom of the page with plain white background. Does anyone know how I can get it to act more of an animated wallpaper so my content isn't pushed down?
#map {
height: 400px;
width: 400px;
margin: 0 auto;
}
.check {
text-align: center;
}
h3,
h2,
h1,
a {
text-align: center;
background-color: transparent;
}
#sky {
overflow: hidden;
}
#clouds {
width: 200%;
height: 1000px;
background-image: url('https://images.unsplash.com/photo-1455735459330-969b65c65b1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80');
-webkit-animation: movingclouds 25s linear infinite;
-moz-animation: movingclouds 25s linear infinite;
-o-animation: movingclouds 25s linear infinite;
}
#keyframes movingclouds {
0% {
margin-left: 0%;
}
100% {
margin-left: -100%;
}
}
<div id="sky">
<div id="clouds"></div>
</div>
Move the animation to the background position. This way, it will animate behind whatever is on top of it. In this case, I've moved the background to the body, but you can use absolute/relative position as well.
By animating the margin, you push everything to one side, not just the background.
body {
background-image: url('https://images.unsplash.com/photo-1455735459330-969b65c65b1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80');
-webkit-animation: movingclouds 25s linear infinite;
-moz-animation: movingclouds 25s linear infinite;
-o-animation: movingclouds 25s linear infinite;
}
#keyframes movingclouds {
0% {
background-position: 0%;
}
100% {
background-position: -100%;
}
}
Working example: https://jsbin.com/ruyemijasi/edit?html,css,js,output
I'm trying to do a simple animation but the result isn't smooth.
.animate {
animation: infinity 1.5s steps(27) forwards;
}
#keyframes infinity {
100% {
background-position: -5778px;
}
}
<div class="animate" style="width:214px; height:32px; background-image:url(https://i.hizliresim.com/gOggGZ.png); background-repeat: no-repeat;"></div>
So is there any way to remove that shaking?
We can't see the snippet, please fix it so we can help better.
On a side note, if the animation is not smooth, maybe transition will help. You can't give the number of steps as 'steps(3)', there is a CSS property
animation-iteration-count: 3;
which determines how many times it should be repeated after completing one full loop. You can use 'infinite' too.
Also, you should maybe also define the 0% for better control over the element animation you want.
.animate {
animation: infinity 1.5s linear forwards; /*add transition here */
animation-iteration-count: 3;
}
/* or on the element itself */
.elementclassname {
-moz-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
#keyframes infinity {
0% {
background-position: 0px;
}
100% {
background-position: -300px;
}
}
Changing animation-timing-function to ease-in-out gives smooth animation.
.animate {
animation: infinity 1.5s ease-in-out forwards;
}
#keyframes infinity {
0% {
background-position: 0px;
}
100% {
background-position: -300px;
}
}
<div class="animate" style="width:200px; height:100px; background-image:url(https://preview.ibb.co/k2cREc/banner_about.jpg); background-repeat: no-repeat; -webkit-transform: rotate(-8deg);-moz-transform: rotate(-8deg);-o-transform: rotate(-8deg);-ms-transform: rotate(-8deg); transform: rotate(-8deg);"></div>
You are explicitly asking CSS to make an animation with 3 steps, this is why your animation isn't smooth.
Simply remove the steps(3) part and you'll be good!
.animate {
animation: infinity 1.5s forwards;
width: 100px;
height: 50px;
background: url('https://i.imgur.com/M5XHVHu.jpg');
background-repeat: no-repeat;
transform: rotate(-8deg);
}
#keyframes infinity {
100% {
background-position: -300px;
}
}
<div class="animate"></div>