Saturday, January 12, 2013

Using CSS3 Animations to Perform Notification



Introduction

From W3schools:
With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in many web pages.

The difference between transition and animation is transition can be applied to change a property smoothly once at a time and the changed property will be applied, animation can change style several times and the changed style do not need to really applied to element.

This article describe how to use CSS3 animation to perform a notification feature.

Try it

Try the sample below with modern browsers:

Mouseover 'User name' or 'Password' to test
User name:
The name used to login
Password:
The password of the name above


The HTML

animation_test.html

Define a keyframe (notificationAnima) while mouseover the parent div and make animation.

<!DOCTYPE html>
<html>
    <head>
        <style> 
            body {
                background-color: #333;
            }
            .container {
                width: 350px;
                background-color: white;
            }
            .notification {
                border: 2px solid #111;
                border-radius: 15px; /* rounded corner */
                background-color: #333;
                color: white;
                font-size: 18px;
                padding: 5px;

                opacity: 0; /* invisible at begining */
            }
            /* define the keyframes rule */
            /* define a keyframe named notificationAnima */
            /* animation in 5 seconds */
            .field:hover .notification {
                -webkit-animation: notificationAnima 5s; /* Safari and Chrome */
                -moz-animation: notificationAnima 5s; /* Firefox */
                -o-animation: notificationAnima 5s; /* Opera */
                animation: notificationAnima 5s;
            }
            /* control the notificationAnima frame */
            @-webkit-keyframes notificationAnima {
                75%        {opacity: 1;} /* display notification for a while */
                100%    {opacity: 0;} /* then hide it again */
            }
            @-moz-keyframes notificationAnima {
                75%        {opacity: 1;}
                100%    {opacity: 0;}
            }
            @-o-keyframes notificationAnima {
                75%        {opacity: 1;}
                100%    {opacity: 0;}
            }
            @keyframes notificationAnima {
                75%        {opacity: 1;}
                100%    {opacity: 0;}
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="field">
                User name: <input type="text"></input>
                <br />
                <span class="notification">The name used to login</span>
            </div>
            <div class="field">
                Password: <input type="text"></input>
                <br />
                <span class="notification">The password of the name above</span>
            </div>
        </div>
    </body>
</html>


The Result

View demo on line
http://screencast.com/t/MDvO7pHaEfe4

Reference

w3schools CSS3 Animations
http://www.w3schools.com/css3/css3_animations.asp

Download

animation_test.html
https://github.com/benbai123/HTML_CSS_Javascript_practice/blob/master/CSS3/animation_test.html

animation_test.swf
https://github.com/benbai123/HTML_CSS_Javascript_practice/blob/master/CSS3/demo/animation_test.swf

No comments:

Post a Comment