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
The name used to login
Password:
The password of the name above
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