CSS Timing Notifications, Animations, and Progress Bars

The article in review did a great job of illustrating and articulating its point on how and when to use animations. The basic fact is that many legacy browsers do not support animations and never will. You need to gauge your audience and see if animations will benefit you in the long run or if doing these create cool features need to have a JS fall back. Hopefully you can stretch the audience and use only CSS3 for better performance.

The key component to the functionality of the CSS is the timing mechanism.

The animation for the box itself is the following:

@keyframes fadeOut {
    0%  { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; transform: translateY(0px);}
    99% { opacity: 0; transform: translateY(-30px);}
    100% { opacity: 0; }

I called it “fadeOut” but it actually fades the box in first and then it makes it fade out and move up a bit.

The animation for the progress bar looks like this:

@keyframes runProgress {
    0%  { width: 0%; background: rgba(255,255,255,0.3); }
    100% { width: 96%; background: rgba(255,255,255,1); }

We animate the width to 96% (left was 2% so we want it to stop 2% from the right as well) and the opacity of the RGBA value.

The duration of the progress bar animation will be a bit less than the duration of the box animation, since we will start it later (the box needs to fade in first).

Here is how you could do it:

.tn-box.tn-box-hoverpause:hover .tn-progress{
    animation-play-state: paused;

These simple CSS properties only give the functionality behind the piece. The amazing styling can be seen at the tutorials home where the author did a great job making these look like beautiful banner ads with pure CSS. It is definitely worthy of a bookmark. I really wish I could put a demo up on this blog instead of a link, but WordPress makes my CSS conflict ironically enough.

See a Demo Here

Read More at the Tutorial Site – http://tympanus.net/codrops/2012/06/25/timed-notifications-with-css-animations/