I'm trying to get a CSS animation to sync up so that a progress bar fills and a background changes at the same time.
For instance, in my example, it should take 5000ms for the progress bar and then every 5000ms the background image should change.
I thought I had this setup correctly setting my animation duration for the background to 20000ms and each step changing in intervals of 25% but this just isn't syncing correctly.
Am I missing something here or is it not really feasible to get something like this to sync accurately?
.progress-bar {
width: 100%;
height: 30px;
background-color: black;
}
.progress-bar > div {
background-color: blue;
height: 30px;
animation: progress-bar 5000ms linear;
animation-iteration-count: infinite;
}
.container {
width: 100%;
height: 500px;
animation: bg 20000ms linear;
animation-iteration-count: infinite;
}
#keyframes progress-bar {
0% {
width: 0px;
}
100% {
width: 100%;
}
}
#keyframes bg {
0% {background-image: url("https://source.unsplash.com/1600x900/?nature,water");}
25% {background-image: url("https://source.unsplash.com/1600x900/?mountain");}
50% {background-image: url("https://source.unsplash.com/1600x900/?tree");}
75% {background-image: url("https://source.unsplash.com/1600x900/?river");}
}
<div class="container">
<div class="progress-bar"><div></div></div>
</div>
You are almost good, you need to avoid transition by adding more steps
.progress-bar {
width: 100%;
height: 30px;
background-color: black;
}
.progress-bar > div {
background-color: blue;
height: 30px;
animation: progress-bar 5000ms linear;
animation-iteration-count: infinite;
}
.container {
width: 100%;
height: 500px;
animation: bg 20000ms linear;
animation-iteration-count: infinite;
}
#keyframes progress-bar {
0% {
width: 0px;
}
100% {
width: 100%;
}
}
#keyframes bg {
0%,24.9% {background-image: url("https://source.unsplash.com/1600x900/?nature,water");}
25%,49.9% {background-image: url("https://source.unsplash.com/1600x900/?mountain");}
50%,74.9% {background-image: url("https://source.unsplash.com/1600x900/?tree");}
75%,100% {background-image: url("https://source.unsplash.com/1600x900/?river");}
}
<div class="container">
<div class="progress-bar"><div></div></div>
</div>
Related
I have created sample
CodePen here.
I tried below but didn't work.
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
}
#-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
#keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
As you will see this sample has 3 images. I give them id = "imge1", "imge2", "imge3"
img3 keeps rotating using keyframe.
I need to show img1 and img2 showing kinda fadein-fadeout effect.
so when img3 rotates to bottom that time may be fadeout img1 and fadeIn img2. (or other way around is fine)
basically 2 images should keep replacing with some fade effect and img3 keeps rotating.
Here is a link I tried but could not achieve solution.
CSS animation, fade in fade out opacity on automated slideshow
CSS how to make an element fade in and then fade out?
also, this needs to be done using pure-css only. I have to put this in nextjs project.
Thanks
You need animation-delay and animation-iteration-count to achieve that
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
figure{
width: 100vw;
height: 50vh;
position: relative;
background: green;
text-align: center;
}
picture{
position: relative;
display: inline-block;
width: 25%;
}
picture img{
width: 100%
}
picture:not(:last-of-type){opacity: 0}
picture:first-of-type{
background: red;
animation: fadeinout 4s linear forwards infinite;
}
picture:nth-child(2){
background: red;
animation: fadeinout 4s 2s linear forwards infinite;/*you need to add the delay here*/
}
picture:last-of-type{
animation: spin 4s linear infinite;
}
figcaption{
position: absolute;
bottom: 0;
left:0;
width: 100%;
}
#keyframes fadeinout {
50% { opacity: 1; }
}
#keyframes spin {
to { transform: rotate(360deg);}
}
<figure>
<picture>img1</picture>
<picture>img2</picture>
<picture>
<img class="img3" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81f928d7217864bf001225/img/login-radar-1.png" alt="img" />
</picture>
<figcaption>Css Labs</figcaption>
</figure>
See below. I added a background color to the third image to make it visible.
#img3 {
background-color: red; /* to make it visible */
}
.flexDisplay {
display: flex;
}
.wrapper {
display: flex;
justify-content: space-evenly;
}
.loginImage {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.img1 {
animation: spin 3s linear infinite;
opacity: 0.1;
width: 200px;
height: 200px;
align-items: center;
}
.elementToFadeInAndOut {
width: 200px;
height: 200px;
background: red;
animation: fadeinout 4s linear infinite;
}
#keyframes fadeinout {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
<div class="flexDisplay">
<div class="wrapper">
<img id="img1" class="elementToFadeInAndOut" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81fc3f75aec5860f52b6a0/img/loginsuper-rectangle-copy.png " class="loginImage" alt="branding logo" />
<img id="img2" class="elementToFadeInAndOut" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81fc3f75aec5860f52b6a0/img/loginsuper-rectangle.png" class="loginImage elementToFadeInAndOut" alt="branding logo" />
<img id="img3" class="img1" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81f928d7217864bf001225/img/login-radar-1.png" alt="img" />
</div>
</div>
Basically, you need to apply 2 different animation functions to the different elements.
I have used z-index to let the images overlap each other and
set the infinite property for the duration of your animation.
You can set an interval for your images using animation-delay.
.flexDisplay{
display: flex;
background: #f1f1f1;
}
.wrapper{
display: flex
}
.img1{
z-index:3;
}
.loginImage1{
width: 100%;
height: 100%;
position:absolute;
left:0;
top:0;
z-index:1;
}
.loginImage2{
width: 100%;
height: 100%;
position:absolute;
left:0;
top:0;
z-index:2;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.img1{
animation: spin 3s linear infinite;
width: 200px;
height: 200px;
align-items: center;
}
.img2{
position: relative;
width: 200px;
height: 200px;
}
.elementToFadeInAndOut1 {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear infinite;
animation: fadeinout 4s linear infinite;
}
#-webkit-keyframes fadeinout {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes fadeinout {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.elementToFadeInAndOut2 {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear infinite;
animation: fadeinout 4s linear infinite;
animation-delay:5s;
}
#-webkit-keyframes fadeinout1 {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes fadeinout1 {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
Created this pen: https://codepen.io/spaceCadett/pen/wvKKowL
I am trying to create a CSS animation where I have a frame with a background image, then I have a crane that needs to slide into the frame from the bottom, so for that I would need overflow:hidden; so that you can't see the crane sliding into the frame. But then after it slides up into the frame, I need the arm of the crane to rotate down and extend out of the frame. However, since I have overflow:hidden; for the first part of the animation, I'm not sure how to make the second part work. Here's what I have so far:
.frame {
width:600px;
height:300px;
background:url('http://placehold.it/600x300');
overflow:hidden;
}
.crane-container {
position:relative;
}
.crane {
position:absolute;
bottom:-500px;
right:100px;
height:200px;
width:50px;
animation:slideUp 3s ease-in-out;
animation-fill-mode: forwards;
}
.arm {
height:200px;
width:50px;
background:#000;
animation:rotateArm 4s ease-in-out;
animation-fill-mode: forwards;
animation-delay: 3s;
transform-origin:bottom left;
}
#keyframes slideUp {
0% {
bottom: -500px;
}
100% {
bottom: -300px;
}
}
#keyframes rotateArm {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-120deg);
}
}
<div class="frame">
<div class="crane-container">
<div class="crane">
<div class="arm"></div>
</div>
</div>
</div>
Think differently and instead of animating position you can animate the height and you don't need the overflow.
Have a look:
.frame {
width: 600px;
height: 300px;
background: url('http://placehold.it/600x300');
overflow: visible;
}
.crane-container {
position: relative;
height:100%;
}
.crane {
position: absolute;
bottom: 0;
right: 100px;
height: 0;
width: 50px;
animation: slideUp 3s ease-in-out;
animation-fill-mode: forwards;
}
.arm {
height: 100%;
width: 100%;
background: #000;
animation: rotateArm 4s ease-in-out;
animation-fill-mode: forwards;
animation-delay: 3s;
transform-origin: bottom left;
}
#keyframes slideUp {
0% {
height: 0;
}
100% {
height: 200px;
}
}
#keyframes rotateArm {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-120deg);
}
}
#keyframes over {
0%,100% {
overflow:visible;
}
}
<div class="frame">
<div class="crane-container">
<div class="crane">
<div class="arm"></div>
</div>
</div>
</div>
currently I'm using this code:
#div { background-image: url('imageurl.com'), url('imageurl2.com'); position: absolute !important; right: 0; left: 0; height: 210px !important; display: table-cell !important; vertical-align: middle !important;}
#keyframes FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#div img.top {
animation-name: FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
I'm actually trying to implement the code from Demo 3 on this website:
http://css3.bradshawenterprises.com/cfimg/
In that demo, there are two images in one div and the code is just fading the first one in and out on a timer. I tried implementing this myself using the above code, but it's fading anything in and out. Does anyone know what I'm missing?
If you need implementation through background-image you can use pseudo-element:
#cf2 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
background-image: url("http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg");
}
#cf2::after{
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background-image: url("http://css3.bradshawenterprises.com/images/Turtle.jpg");
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
}
#keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#cf2::after {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
<div id="cf2">
</div>
here's the implementation, they use separate <img> tags to show/hide images:
they are absolutely positioned one above the other, that one which is on top is just showing and hiding by the animation (which changes its opacity) - so the bottom one just becomes visible when top one has opacity = 0
#keyframes cf3FadeInOut {
0% {
opacity: 1;
}
45% {
opacity: 1;
}
55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
#cf3 img {
position: absolute;
left: 0;
}
#cf3 {
position: relative;
height: 281px;
width: 450px;
margin: 0 auto;
}
<div id="cf3" class="shadow">
<img class="bottom" src="http://css3.bradshawenterprises.com/images/Turtle.jpg">
<img class="top" src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg">
</div>
background: #ececec url(images/x/x.jpg) top left repeat-x;
I want to slide it. It's loopy image. I want to slide it from left to right or right to left. It doesen't matter... How can I do this?
You could try using keyframes, here's a good example;
http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
If you want to add animation to background then you can use pseudo element and add animation to it
div {
position: relative;
height: 200px;
width: 200px;
border: 1px solid red;
overflow: hidden;
}
div:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index:-1;
background: url(http://placehold.it/200x200) no-repeat;
-webkit-animation: slide 4s linear infinite;
-moz-animation: slide 4s linear infinite;
animation: slide 4s linear infinite;
}
#-webkit-keyframes slide {
0% {
left: 101%;
}
100% {
left: -101%;
}
}
#-moz-keyframes slide {
0% {
left: 101%;
}
100% {
left: -101%;
}
}
#keyframes slide {
0% {
left: 101%;
}
100% {
left: -101%;
}
}
<div class="slide">
<p>The background image is moving</p>
</div>
I'm trying to animate the background-position of a div, slowly, but without it having jerky movement. You can see the result of my current efforts here:
http://jsfiddle.net/5pVr4/2/
#-webkit-keyframes MOVE-BG {
from {
background-position: 0% 0%
}
to {
background-position: 187% 0%
}
}
#content {
width: 100%;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
text-align: center;
font-size: 26px;
color: #000;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
I have been at this for hours and can't find anything that will animate slowly and smoothly at a sub-pixel level. My current example was made from the example code on this page: http://css-tricks.com/parallax-background-css3/
The smoothness of animation I'm after can be seen on this page's translate() example:
http://css-tricks.com/tale-of-animation-performance/
If it can't be done with the background-position, is there a way to fake the repeating background with multiple divs and move those divs using translate?
Checkout this example:
#content {
height: 300px;
text-align: center;
font-size: 26px;
color: #000;
position:relative;
}
.bg{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
animation-name: MOVE-BG;
animation-duration: 100s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes MOVE-BG {
from {
transform: translateX(0);
}
to {
transform: translateX(-187%);
}
}
<div id="content">Foreground content
<div class="bg"></div>
</div>
http://jsfiddle.net/5pVr4/4/
Animating background-position will cause some performance issues. Browsers will animate transform properties much cheaply, including translate.
Here is an example using translate for an infinite slide animation (without prefixes):
http://jsfiddle.net/brunomuller/5pVr4/504/
#-webkit-keyframes bg-slide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.wrapper {
position:relative;
width:400px;
height: 300px;
overflow:hidden;
}
.content {
position: relative;
text-align: center;
font-size: 26px;
color: #000;
}
.bg {
width: 200%;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) repeat-x;
position:absolute;
top: 0;
bottom: 0;
left: 0;
animation: bg-slide 20s linear infinite;
}
You should adjust your HTML and CSS little bit
Working Demo
HTML
<div id="wrapper">
<div id="page">
Foreground content
</div>
<div id="content"> </div>
</div>
CSS
#-webkit-keyframes MOVE-BG {
from { left: 0; }
to { left: -2000px; }
}
#wrapper {
position:relative;
width:800px;
height: 300px;
overflow:hidden;
}
#page {
text-align: center;
font-size: 26px;
color: #000;
}
#content {
width: 2000px;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
position:absolute;
top: 0;
left: 0;
z-index:-1;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}