Develop Reference

CSS transitions: Why won't my CSS transition work as I expect?

I have a flash message div at the top of my page for when the site wants to display any messsages to the user.
I want the flash message to fade out after a couple of seconds. I'm using a CSS transition.
Here is my code:
.flash {
position: fixed;
opacity: 1;
visibility: visible;
transition: opacity 2s ease-in, visibility 2s ease-in;
}
.hide {
visibility: hidden;
opacity: 0;
}
document.querySelectorAll('.flash').forEach(function(flash){
flash.classList.toggle('hide');
})
I expect that when the page loads, the div will be visible before fading out. But, in Safari, when the page loads, .flash is invisible.
In Chrome, the page loads and the .flash div fades as expected. However, on reloading the page, the div still has the .hide class attached and so the flash message remains invisible. (I can store state in HTML?!!) Strangely, in Chrome, it works if I'm inspecting an element in the document with developer tools when I reload the page.
Now I'm highly confused.
Why does .hide remain attached to the div across page reloads?
Why does Safari fail to display the div at all?

EDIT: after your comment reply, what you need to do is trigger the fadeout on a focus event.
.flash:focus {
//use the fadeout code here
}
The reason is the toggle, your browser saves the state of the page in the browser's cache but not the javascript that is dynamically changing the css on reload, on and off.
Instead of manipulating the css with javascript, google fade out with css.
.fade-out {
animation: fadeOut ease 10s;
-webkit-animation: fadeOut ease 10s;
-moz-animation: fadeOut ease 10s;
-o-animation: fadeOut ease 10s;
-ms-animation: fadeOut ease 10s;
}
#keyframes fadeOut {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
it's a lot smoother this way, and you can test it more easily with the developer tools.

Transition misbehavior

I have several problems with transition behavior, probably they are the same single problem.
First class of problems with a short transitions.
<style>
.someclass {
transition: all 1s linear;
}
</style>
<script>
function activationcode()
{
//$('.someclass').hide(); was in display none state.
$('.someclass').css('opacity', 0);
$('.someclass').show();
$('.someclass').css('opacity', 1);
}
</script>
Add in most of cases this code doesn't work as expected. The .someclass item appears in final state. The changing property doesn't matter, opacity is just for example. To make it working the two things helps: a) changing all for transition to the particular property, for this example to opacity; b) call $('.someclass').css('opacity', 1); with delay, for example, 100ms.
But this only reduce probability of problem to very low value, doesn't fix it.
Second class of problem is for a long animation. It works, but if you put it inside the tab (or anything like that), and will start to switch from animated tab to other one, the animation may be finished in a final state before the specified time. Single switch/switch-back usually doesn't break animation. But two or more switches does with very high probability.
I can reproduce this on Firefox (not very recent). Initially was reported for Chrome (reporter states that he uses the last one version).
I suspect that the problem does depend on amount of css/js activity on page (was unable to reproduce second problem with minimal jsfiddle).
So the question is how to fix such problems, does any solution exist?

Place the line...
$('.someclass').css('opacity', 1);
...in a setTimeout(fn, 0). This will defer its execution, ensuring that the browser won't optimise those steps into one paint (show the element at 100% opacity).

I suggest that you use classes instead and handle show/hide in CSS only
.hide {
display: none;
opacity: 0;
transition: opacity 1s linear 0s, display 0s linear 1s;
/* decrease opacity, then change display with a delay */
}
.show {
display: block;
opacity: 1;
transition: display 0s linear 0s, opacity 1s linear 0s;
/* change display instantly without delay, then increase opacity */
}
By delaying the hiding for 1s, you allow the opacity transition to complete before hiding it.
But we reset the delay on the showing because we need people to see the opacity increasing.

How is this body fadeIn animation done?

I discovered the "http://thegoodman.cc/". It's an absolutely amazing website.
I am just really really curious, as to how the body of this document is slightly faded in, and slide up in this page:
http://thegoodman.cc/about/

It's done using CSS animations. When looking at the source, you'll find this line of code:
.sup {
animation:sup 1.8s backwards;
}
#keyframes sup {
0% {
opacity:0;
transform:translateY(50px);
}
30% {
opacity:0;
}
100% {
opacity:1;
transform:translateY(0);
}
}
It'll fade in the text (using opacity) and move it up using translateY .
JSFiddle example.
Take note it's using the Prefix Free JS library to prevent having to add prefixes like -webkit-, -moz- etc.

CSS3 Multiple Transitions of the Same Element

I am trying to make a dropdown effect for one of my background images. I was able to do it using css3 but it's not complete.
The effect is supposed to be a curtain that drops down then sort of bounces back up a little. The problem with css3 is that I don't know how to do to transitions on the same property because the last one overrides the previous ones.
Here's my code:
ul#nav li a {
/* ADDS THE DROPDOWN CURTAIN TO THE LINKS BUT HIDDEN OFF SCREEN */
background: url(images/drape2.png) 0px -149px no-repeat;
/* CSS3 transitions */
-moz-transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
}
ul#nav li a:hover {
/* Action to do when user hovers over links */
background-position: 0px 0px; /* make drape appear, POOF! */
background-position: 0px -10px; /* make drape appear, POOF! */
}
Any help would be much appreciated.

You'll want to chain them with commas instead of a new line
For instance:
background-color 500ms linear, color 500ms linear;

Using cubic-bezier like this:
cubic-bezier(0, 0.35, .5, 1.3)
You can make an animation go backwards—or bounce a little.
Demo (Only works in Firefox)
Source
Edit: I also made you a Webkit only option, I don't know how compatible these two techniques are. It may also work in Firefox with the -moz browser prefixes, but I haven't tested it. This one uses keyframe animation as opposed to transitions.

Mobile webkit CSS vs JavaScript performance

I hae a very simple application. I create bubbles at the bottom of the page and have them floating to the top of the page.
I've tried two methods to do this:
1) Using a repeating JavaScript function that loops through the bubbles DOM and uses jQuery to decrease the "top" CSS property:
function frame() {
$(".bubble").each(function() {
$(this).css("top", "-=5");
});
}
2) Using webkit CSS transitions:
.bubble {
-webkit-transition: top 5s linear;
top:-200px
}
Both methods work fine on a desktop browser, but neither does very well in a mobile environment. The CSS option is marginally faster, but still not what I'd call good.
Any tips?

Try:
.bubble {
-webkit-transition: top 5s linear;
-webkit-transform: translate3d(0px, -200px, 0px);
}
On iOS at least, that will be hardware accelerated. If you want this to be slightly more backward compatible, then:
.bubble {
-webkit-transition: top 5s linear;
-webkit-transform3d(0,0,0);
-webkit-transform: translate(0px, -200px);
}
Will work on browsers without 3d transforms, whilst still getting HW accel. I'd verify that the first one improves performance, then check that the 2nd one also works as well, rather than just using the second one!

I would recommend trying it with canvas.
Two examples:
http://3.paulhamill.com/node/39
http://blog.hostgrenade.com/wp-content/demo/bubbles/