So I am using only css to animate a stripped progress bar on my file upload form.
The thing that when the file is successfully uploaded and the upload is finished, (progress bar reach 100%) the animation won't stop! The strips keep moving as if the file is still uploading. Can please anyone show me how to fix this little issue?
My CSS code
.ajax-file-upload-bar {
background-color: #0ba1b5;
width: 0;
height: 30px;
border-radius: 3px;
color:#FFFFFF;
font-family: calibri;
background-image: linear-gradient(
-45deg,
rgba(255,255,255,0.25) 25%,
transparent 25%,
transparent 50%,
rgba(255,255,255,0.25) 50%,
rgba(255,255,255,0.25) 75%,
transparent 75%,
transparent
);
background-size: 40px 40px;
display: block;
height: 100%;
width: 100%;
animation: anim_stripes 1s linear infinite;
-webkit-animation: anim_stripes 1s linear infinite;
}
#keyframes anim_stripes {
from {
background-position: 0 0;
}
to {
background-position: 40px 40px;
}
}
You can stop the animation after downloading the file add class .paused
.ajax-file-upload-bar.paused {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
UPD_
JavaScript:
var reader = new FileReader();
reader.onload = function(e) {
var file = e.target.result;
$('.ajax-file-upload-bar').addClass('paused);
};
Related
I am trying to create a pulsating circular background with smooth edges. For the circle with smooth edges I am using this CSS code:
background: radial-gradient(black, black, transparent, transparent);
Using my code below works well to animate the background-color. However, as soon as I replace the background-color with this radial-gradient background the animation jumps and is no longer smooth. The behavior is consistent over multiple Browsers. This is a minimal working example of the issue I am having:
.global {
background: lightskyblue;
}
.silver {
// background: radial-gradient(black, black, transparent, transparent);
animation: pulse 3s infinite;
}
#keyframes pulse {
0%,
100% {
// background-color: black;
background: radial-gradient(black, transparent, transparent, transparent);
}
50% {
// background-color: white;
background: radial-gradient(black, black, transparent, transparent);
}
}
<body class="global">
<img src="pngwave.png" alt="test" class="silver" />
</body>
I have found this Stackoverflow question which is similar but did not help me solve my problem.
You need to animate the background-size
.box {
width: 200px;
height: 200px;
background: radial-gradient(farthest-side,black, transparent) center no-repeat;
animation:pulse 2s linear infinite alternate;
}
#keyframes pulse{
from {
background-size:50% 50%;
}
to {
background-size:100% 100%;
}
}
<div class="box"></div>
I am creating an interactive touchscreen display using a program called Intuiface and have created some background tiles/squares that I want to make look 'alive' by transitioning slowly between colours.
I have used a linear-gradient transition in CSS to do it but the problem is that the transition looks choppy. The program is running 12 visible tiles (it is a very large touchscreen).
I have tried using fewer colours and running on more powerful GPUs (I think it is CPU run anyway) but this hasn't helped.
body {
width: 100wh;
height: 90vh;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
animation: Gradient 15s ease infinite;
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
At the moment the animations are noticeably choppy. I would like the transition to be much smoother. Does anyone know how I can achieve this?
Here is the code snippet.
body {
width: 100wh;
height: 90vh;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
animation: Gradient 15s ease infinite;
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
<html>
<body>
</body>
</html>
Animating background-* properties can be resource intensive - you can try animating transform for relatively better performance - see demo below using traslate for the animation:
body {
margin: 0;
}
div {
height: 100vh;
overflow: hidden;
}
div:after {
content: '';
display: block;
width: 400vw;
height: 400vh;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
animation: gradient 15s ease infinite;
}
#keyframes gradient {
50% {
transform: translate(-300vw, -300vh);
}
}
<div></div>
Since your animation lasts 15 seconds, trying to run it at full 60fps would mean calculating 15*60 = 900 frames.
Since the difference between a frame and the next is quite small, you can make the CPU work quite less asking for a stepped animation, for instance with steps(75)
It could be also good to set slight delays between animations, so that they don't execute at the same time
body {
width: 100wh;
height: 90vh;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
animation: Gradient 15s infinite steps(75);
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
<html>
<body>
</body>
</html>
I want to switch background image of the body periodically, cross fading between each image.
A script solution would look like this:
css:
body
{
background-image: url("img/1.jpg");
background-size: cover;
background-position: center 0;
background-attachment: fixed;
transition: background-image 2s ease-in-out;
}
js:
var images = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"];
var current_image = 0;
$(function ()
{
var body = $("body");
setTimeout(next, 10000);
function next()
{
current_image = (current_image + 1) % images.length;
body.css("background-image", "url('img/" + images[current_image] + "')");
setTimeout(next, 10000);
}
});
But is it possible to cross fade the background of a single element (as opposed to change opacities of a number of img elements) using no scripting?
Yeah you could do it with css animations.
something like this.
* { box-sizing: border-box}
.slides {
width: 300px;
height: 300px;
background: tomato;
animation: images 4s linear 0s infinite alternate;
}
#keyframes images {
0% {
background: url('https://fillmurray.com/300/300')
}
50% {
background: url('http://www.placecage.com/c/300/300');
}
100% {
background: url('https://stevensegallery.com/300/300')
}
}
<div class="slides"></div>
I post this as an answer to my own question even if there is a solution that I accepted. What this will add is how to stay for a while on the same image without immediately transitioning to the next.
body {
background-size: cover;
background-position: center 0;
background-attachment: fixed;
animation: images 100s linear 0s infinite;
}
#keyframes images {
0% {
background-image: url("img/1.jpg")
}
19% {
background-image: url("img/1.jpg")
}
20% {
background-image: url("img/2.jpg");
}
39% {
background-image: url("img/2.jpg");
}
40% {
background-image: url("img/3.jpg");
}
59% {
background-image: url("img/3.jpg");
}
60% {
background-image: url("img/4.jpg");
}
79% {
background-image: url("img/4.jpg");
}
80% {
background-image: url("img/5.jpg");
}
99% {
background-image: url("img/5.jpg");
}
100% {
background-image: url("img/1.jpg")
}
}
I tried to group some percentages like
0%, 19%, 100% {
background-image: url("img/1.jpg");
}
but that resulted in "flickering" between images.
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 have been having trouble making my site work across all major browsers, and I have become stuck once again. My keyframes animation does not run in Firefox, and I cannot work out why. It works perfectly in Chrome.
.runner {
border-radius: 40pt;
-webkit-box-shadow: 0 0 10pt grey;
-moz-box-shadow: 0 0 10pt grey;
box-shadow: 0 0 10pt grey;
width:494px;
height: 415.8px;
position: absolute;
top: 0;
left: 0;
background: url(pic1.png);
-webkit-animation: slideshow 20s infinite 2s;
-moz-animation: slideshow 20s infinite 2s;
animation: slideshow 20s infinite 2s;
}
#keyframes slideshow {
20% { background: url(pic1.png) }
25%, 45% { background: url(pic2.png) }
50%, 70% { background: url(pic3.png) }
75%, 95% { background: url(pic4.png) }
}
#-webkit-keyframes slideshow {
20% { background: url(pic1.png) }
25%, 45% { background: url(pic2.png) }
50%, 70% { background: url(pic3.png) }
75%, 95% { background: url(pic4.png) }
}
You don't need the -moz-animation prefix anymore, but you do need to add prefixes on the keyframes(#-moz-keyframes).
First of all, I am using Firefox 28.
Below is the tutorial from W3 schools. So i believe it's worth having a look.
CSS3 Animation Property try out
One thing is that, I think tutorial has been updated and -moz- link does not seem to be there.
So, as far as compatibility is concerned, the jurassic versions of IE and Firefox 3.5 and before may produce problem.