Develop Reference

Why does CSS rotate stutters when i have a background process? IE and FF

I have a simple CSS code that rotates an image when it is clicked, As shown bellow. This is standard spinner code that i toggle when its clicked.:
CSS:
.rotate {
-webkit-animation-name: spinner;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spinner;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spinner;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
#-webkit-keyframes spinner
{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
#-moz-keyframes spinner
{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
#-ms-keyframes spinner
{
from{-ms-transform:rotate(0deg);
}
to{
-ms-transform:rotate(360deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
}
#keyframes spinner {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
The CSS works just fine and smoothly up until it reaches this part of my JS code. Does IE or FF have a hard time doing 2 things at once? I dont get why it works just fine on Chrome:
JS:
var datas = _.map(sourceData, function (item, index) {
return new sourceItem(item,index);
});

Yes, Animations and loops always pull up a lot of resources. try executing them one by one.
Delay the execution using
setTimeout(function(){
// code here
},100); // milliseconds

Change initial style value with animation

I have an element
<form class="fade-in-form">...</form>
with an animation
.fade-in-login-form{
opacity: 0;
-webkit-animation: fadein 2s; !important;
-webkit-animation-delay: 3s; !important;
}
#-webkit-keyframes fadein {
from {
opacity:0;
}
to {
opacity:1; !important;
}
}
and I want the element to be invisible at first, but then fading in.
The problem is that the form is invisible at first (opacity: 0;), then fades in, but after the animation flashes to be invisible again! Why doesn't the animation overwrite the initial value of opacity: 0; with opacity: 1;? And how can I achieve what I want?
If the solution requires Javascript: I prefer AngularJS over jQuery.

An animation by default only applies as long as it is running. When it ends running, it no longer applies
If you want to change this behaviour, you need to use the animation-fill-mode property
In your case, the value is forwards
animation-fill-mode: forwards;
(With prefixes if needed)

First, syntax-wise, I think you should not have a semi-colon between your values and !important (not a good one to use, by the way) :
-webkit-animation: fadein 2s !important;
Second, I guess the styles are not applied because your elements are not loaded ; if you set display to block on the form and set it back to block after page content is loaded with javascript (see code below), does it work better ?
document.addEventListener("DOMContentLoaded", function(event)
{
document.getElementById("form").style.display = "block";
});
codepen example

Just leave off the opacity: 0; in your first selector:
.fade-in-form {
-webkit-animation: fadein 2s 3s; /* Chrome, Opera 15+, Safari 5+ */
animation: fadein 2s 3s; /* Chrome, Firefox 16+, IE 10+, Opera */
}
#-webkit-keyframes fadein {
0% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#keyframes fadein {
0% { opacity: 0.0; }
100% { opacity: 1.0; }
}
As #sodawillow mentioned try never ever to use !important but if you really have to use it like this: property-name: property-value !important;

Delay Keyframes per defined time and keep opacity 0 after animation

I've been using HTML5 and Css3 to build an animated banner, but I have a few issues I can't find a work around for at the moment.
Heres a quick bit of code to use for an example, imagine this is a div layer with an image assigned to it.
First off is Opacity, it works until the end of the timeline animation then re-appears, is there a css way to get round this or would I have to use javascript?
Secondly is transition delay, I would of thought I could do a keyframe delay and freeze it for a few seconds inbetween each transition, but it never takes effect. If anyone can help I'd aprpeaciate it!
#-webkit-keyframes animation {
0% {
opacity:1;
-webkit-animation-timing-function: ease;
-webkit-transform: translateY(0px);
}
50% {
-webkit-transition-delay:10s;
opacity:1;
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateY(300px);
}
100% {
opacity:0;
-webkit-animation-timing-function: ease-inout;
-webkit-transform: translateY(900px);
}
}
#animation {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: animation
}
FIrst off is the delay command, Transition-delay and animation-delay, both
*******Update************
Opacity is solved, to get it to finish after the animation, have your First frame 0% set to opacity 0. If that's a problem set a frame to 1% set it to opacity 1.
Then add forwards on the end of your animation i've been doinbg it shorthand so something like this.
#bannerImg {
-webkit-animation: bannerImg-animation1 3s 0s 1 ease-in-out forwards}

I couldn't find a way to make the code nice to look at but since starting delays and animations from within an animation itself does not seem to work I stuck the following together:
#-webkit-keyframes animation {
0% {
opacity:1;
-webkit-animation-timing-function: ease;
-webkit-transform: translateY(0px);
}
18.75% {
opacity:1;
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateY(300px);
}
81.25% {
opacity:1;
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateY(300px);
}
100% {
opacity:0;
-webkit-animation-timing-function: ease-inout;
-webkit-transform: translateY(900px);
}
}
#animation {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 16s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: animation;
}
JSFiddle
This solution just uses 18.75% and 81.25% as markers for the delay, changing nothing during that time (10 seconds).

jQuery : How to animate a span and show?

I have a function that checks mail on every 10 secods, if there is a new email, it make a bubble notification and show the total number of mail.
jQuery("#bubble_mate").text(responseText.totalmail);
jQuery("#bubble_mate").addClass('animating').show();
It animates the bubble, first time I load the page, but this function is set on an interwal, so it should animate the bubble each time there is new mail, but it Doesn't
My animation and other functions are perfect.. it is just it Doesn't animate when it is being called in set interval. it ads the number of total mail.. but no animation.
Please help me.
Regards
Added
This is animating class and css
.animating{
-webkit-animation: animate 1s cubic-bezier(0,1,1,0);
-moz-animation: animate 1s cubic-bezier(0,1,1,0);
-ms-animation: animate 1s cubic-bezier(0,1,1,0);
-o-animation: animate 1s cubic-bezier(0,1,1,0);
animation: animate 1s cubic-bezier(0,1,1,0);
}
#-webkit-keyframes animate{
from {
-webkit-transform: scale(1);
}
to {
-webkit-transform: scale(1.7);
}
}
#-moz-keyframes animate{
from {
-moz-transform: scale(1);
}
to {
-moz-transform: scale(1.7);
}
}
#-ms-keyframes animate{
from {
-ms-transform: scale(1);
}
to {
-ms-transform: scale(1.7);
}
}
#-o-keyframes animate{
from {
-o-transform: scale(1);
}
to {
-o-transform: scale(1.7);
}
}
#keyframes animate{
from {
transform: scale(1);
}
to {
transform: scale(1.7);
}
}

You'll need to remove the class once the animation is completed, and re-add it once you'll need to use it again.
setInterval(function() {
$("#bubble_mate").addClass('animating');
setTimeout(function() {
$("#bubble_mate").removeClass('animating');
}, 1000); // This is the time specified in your CSS
}, 3000); // Example interval time
​JSFiddle.

If you are using keyframe animations, you may want to remove the class, then wait 1 ms and re-add the class. Adding the class multiple times will not animate it multiple times.
$('#test').addClass('animated');
setInterval(function(){
$('#test').removeClass('animated');
setTimeout(function(){
$('#test').addClass('animated')
}, 1);
}, 3000);
Will give the test element the class 'animated', which will start the animation, and every 3 seconds, it will remove the class, pause for 1 ms, then re-add it, which will restart the animation.
Source: http://jsfiddle.net/jcolicchio/eV7ET/

To show the slide down effect you have first to hide the div!
$("#simulate").on("click", function() {
console.log("mail in");
$("#bubble_mate").text("10 new mail");
$("#bubble_mate").addClass('animating').hide();
$("#bubble_mate").slideDown(500);
});
try on this fiddle
http://jsfiddle.net/jQmJr/32/
​

Try:
jQuery("#bubble_mate").hide().show('normal');

I resolved it myself..
in beforeSend function i added this:
beforeSend:function (){
jQuery("#bubble_mate").removeClass('animating');
},
and then on success:
success:function(responseText)
{
if(responseText.mails=='yes')
{
jQuery("#bubble_mate").text(responseText.totalmail);
jQuery("#bubble_mate").addClass('animating').show();
}
}

I used the webkitEndAnimation event to remove the animated class and the end of the animation.
Here is the live example
Code:
$(document).ready(function(){
setInterval(function(){
$('#test').show().addClass('animated');
}, 3000);
$('#test').on('webkitAnimationEnd', function () {
$(this).removeClass('animated').hide();
});
});​
If this works for you should think of a way to get the correct event name depending on the users browser

css3 image fadein

I'm trying to have images fade in with css3 once they're loaded. The problem is the way my methods are currently chained it fades it in and out for a split second twice. instead of just being blank and fading in.
my solution was to try and split out the animation code into a seperate class that i apply AFTER i initially set the opacity to zero (i do this in JS so people without js enabled can still see the images).
It's still not working though
I assume its because in this code its setting the opacity to zero and immediately adding an animation transition class which somehow catches the opacity .css() method while its changing still (dont know how this is possible,... shouldnt it complete opacity before moving on to add class?)
// nice thumbnail loading
$('.thumb').css('opacity','0').addClass('thumb-animated').on('load', function(){
$(this).css('opacity','1');
});
.resources .thumb-animated {
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-ms-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}

Well...
Why do you set opacity to 1 in jQuery?
If you want to use CSS3 and not simply fadeIn(200) why don't you add "opacity: 1" to css class thumb-animated?
EDIT:
Note that load will not be triggered if the image is already in cache.
Also, !important has to be added to rewrite the rule modified via javascript.
There you go: http://jsfiddle.net/enTCe/5/
This seems to work perfectly outside JSfiddle, on JSfiddle looks like it waits for all the images to be loaded.

What about using just css animations? No JS code is needed.
#-webkit-keyframes opacityChange {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes opacityChange {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-ms-keyframes opacityChange {
0% { opacity: 0; }
100% { opacity: 1; }
}
.thumb {
width: 200px;
height: 200px;
opacity: 1;
-webkit-animation: opacityChange 5s;
-moz-animation: opacityChange 5s;
-ms-animation: opacityChange 5s;
}

You can wait adding the class to the image is loaded
$('.thumb').css('opacity','0').on('load', function(){
$(this).addClass('thumb-animated').css('opacity','1');
});

Try something like this:
$('#thumb').hide();
myImg = $('<img>').attr('src', 'thumb.png').load(function(){
$('#thumb').html(myImg).fadeIn(200);
});