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>
Related
I just want this image to scale down from 2 and back to normal then stop.
In my browser it jitters at the end of the animation and the image goes back to the normal size..
Any idea why it's doing this?
Codepen here also.
.hero {
height: 100vh;
background: grey;
overflow:hidden;
}
.image {
background-position:center;
background-size:cover;
background-repeat:no-repeat;
height: 30vw;
width: 50%;
margin-left: auto;
animation: scale 4.5s ease;
-webkit-animation: scale 4.5s ease;
-moz-animation: scale 4.5s ease;
-o-animation: scale 4.5s ease;
-ms-animation: scale 4.5s ease;
backface-visibility: hidden;
}
#keyframes scale {
0% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
<section class="hero">
<div class="image" style="background-image:url('https://picsum.photos/1000/1000')"></div>
</section>
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>
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'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>
I am new to CSS and still don't get a lot of stuff! Using only CSS animations I have to create a spinning animation over a roulette.I have to create a sphere and as a background use a roulette img. My question is how can I change the position of the sphere every 10% of the animation, so it can make a full circle around the roulette.
This is the img I am using as a background: http://www.casinoanswers.com/wp-content/uploads/2010/03/american-roulette-wheel.gif
HTML:
<div id="roulette">
<figure class="circle"></figure>
</div>
CSS:
#roulette{
background-image: url("american-roulette-wheel.gif");
width:395px;
height:400px;
margin:0;
}
.circle {
position:fixed;
top:84px;
left:190px;
border-radius: 50%;
height: 30px;
width: 30px;
margin:0;
background: radial-gradient(circle at 10px 10px, #5cabff, #000);
}
Thank you!
By placing your ball/circle image inside a container div and rotating that div, you can create the illusion of the ball traveling around the background. You will have to play with positioning to get it exact, and it might be cool to rotate the ball as well as the container div.
<div id="roulette">
<div class="circleContainer">
<figure class="circle"></figure>
</div>
</div>
#roulette{
background-image: url(http://www.casinoanswers.com/wp-content/uploads/2010/03/american-roulette-wheel.gif);
width:395px;
height:400px;
margin:0;
}
.circle {
border-radius: 50%;
height: 30px;
width: 30px;
margin:0;
background: radial-gradient(circle at 10px 10px, #5cabff, #000);
}
#-webkit-keyframes spinnerRotate
{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
#-moz-keyframes spinnerRotate
{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
#-ms-keyframes spinnerRotate
{
from{-ms-transform:rotate(0deg);}
to{-ms-transform:rotate(360deg);}
}
.circleContainer{
height: 250px;
top: 80px;
position: fixed;
left: 190px;
-webkit-animation-name: spinnerRotate;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spinnerRotate;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spinnerRotate;
-ms-animation-duration: 5s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
https://jsfiddle.net/2gat1m5y/1/