Using CSS3 keyframe property, you can create cool animation effects without using any JavaScript frameworks, CSS3 & HTML5 is helping to solve many web problems in a simple way. In this article I want to discuss how to implement CSS3 animations in a better way, use these and enrich your web projects. Take a quick look at these demos and try all these with modern browsers like Chrome, Firefox and Safari, sure you will love these effects.
Download Script 
Live Demo 1 Live Demo 2 Live Demo 3CSS3 Keyframe Syntax
Here I am just changing the opacity value based on keyframe percentage.
<style>
@keyframes flashEffect
{
0%, 50%, 100%
{
opacity: 1;
}
25%, 75%
{
opacity: 0;
}
}
//Webkit for Safari and Chrome browsers
@-webkit-keyframes flashEffect
{
0%, 50%, 100%
{
opacity: 1;
}
25%, 75%
{
opacity: 0;
}
}
.flash
{
animation:flashEffect 1s infinite;
-webkit-animation:flashEffect 1s infinite; /* Safari and Chrome */
text-shadow: 2px 2px 8px #FFFFFF; /* Blur effect */
}
</style>
@keyframes flashEffect
{
0%, 50%, 100%
{
opacity: 1;
}
25%, 75%
{
opacity: 0;
}
}
//Webkit for Safari and Chrome browsers
@-webkit-keyframes flashEffect
{
0%, 50%, 100%
{
opacity: 1;
}
25%, 75%
{
opacity: 0;
}
}
.flash
{
animation:flashEffect 1s infinite;
-webkit-animation:flashEffect 1s infinite; /* Safari and Chrome */
text-shadow: 2px 2px 8px #FFFFFF; /* Blur effect */
}
</style>
More CSS3 text effects read my previous post Text Effects using CSS3
Flash Effect Live DemoHTML5 Code
CSS3 works with HTML5 doctype this informs the browser to render code in advanced way, include the CSS code within the tag HEAD.
<!doctype html>
<html lang="en">
<head>
<title>Page Title</title>
//Include style here
</head>
<body>
<div class="flash">
9lessons Programming Blog
</div>
</body>
</html>
<html lang="en">
<head>
<title>Page Title</title>
//Include style here
</head>
<body>
<div class="flash">
9lessons Programming Blog
</div>
</body>
</html>
Animation.css
Contains CSS code it is a combination of CSS3 effects, written by Daniel Eden. You can download latest Animation.css here, if you don't have time use this.
<!doctype html>
<html lang="en">
<head>
<title>Page Title</title>
<link rel="stylesheet" href="animate.css"/>
<style>
.effectTada
{
animation:tada 1s infinite;
-webkit-animation:tada 1s infinite; /* Safari and Chrome */
}
.effectBounce
{
animation:bounce 1s infinite;
-webkit-animation:bounce 1s infinite; /* Safari and Chrome */
}
.effectSwing
{
animation:swing 1s infinite;
-webkit-animation:swing 1s infinite; /* Safari and Chrome */
}
</style>
</head>
<body>
<img src="image1.png" class="effectSwing" />
<img src="image2.png" class="effectTada" />
<img src="image3.png" class="effectBounce" />
</body>
</html>
<html lang="en">
<head>
<title>Page Title</title>
<link rel="stylesheet" href="animate.css"/>
<style>
.effectTada
{
animation:tada 1s infinite;
-webkit-animation:tada 1s infinite; /* Safari and Chrome */
}
.effectBounce
{
animation:bounce 1s infinite;
-webkit-animation:bounce 1s infinite; /* Safari and Chrome */
}
.effectSwing
{
animation:swing 1s infinite;
-webkit-animation:swing 1s infinite; /* Safari and Chrome */
}
</style>
</head>
<body>
<img src="image1.png" class="effectSwing" />
<img src="image2.png" class="effectTada" />
<img src="image3.png" class="effectBounce" />
</body>
</html>
Image Animations Live DemoDelete Records Jquery Code
Contains javascipt code. $(".stdelete").click(function(){}- stdelete is the class name of anchor tag (X). Using $(this).parent().parent() calling parent container DOM value. For ajax implementation please check Delete Records with Animation Effect using jQuery and PHP.
<link rel="stylesheet" href="animate.css"/>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function()
{
$(".stdelete").click(function()
{
var A=$(this).parent().parent();
A.addClass("effectHinge"); //Applying style
A.delay(500).fadeOut("slow",function()
{
$(this).remove();
});
});
});
</script>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function()
{
$(".stdelete").click(function()
{
var A=$(this).parent().parent();
A.addClass("effectHinge"); //Applying style
A.delay(500).fadeOut("slow",function()
{
$(this).remove();
});
});
});
</script>
Status Message Live DemoHTML Code
Take a look at Status Message Design with CSS
<div class="stbody">
<div class="sttext"><span class="stdelete">X</span>
9lessons Programming Blog
</div>
</div>
<div class="sttext"><span class="stdelete">X</span>
9lessons Programming Blog
</div>
</div>
Awesome :)
ReplyDeletenice one
ReplyDeleteAwesome man.....
ReplyDeletespeechless... :) keep it up
ReplyDeletenice man. :)
ReplyDeleteCool CSS animation..
ReplyDeleteSimply Awesome man!!!
ReplyDeleteSuper Cool Effects.......
ReplyDeleteAwesome effects thanks for sharing it with us
ReplyDeleteNice tutorial Dude.. i dont knw much about CSS3 , But this is really good
ReplyDeleteReally awesome ... :)
ReplyDeleteLast demo is really looking great though did not like the first and second one. I understand that it depends on the taste of each person and from your end, you did a really good job. Thumbs up !!
ReplyDeletenice
ReplyDeletegreat !!!!!!!!!
ReplyDeleteReally concise info about css3 animations
ReplyDeleteawsome effects
ReplyDeletevery nice ...
ReplyDeletenice your website and can you guide me iam sending message to face book
ReplyDeleteGreat :-)
ReplyDeleteSUPERB......
ReplyDeletesuperb
ReplyDeleteSuperb
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDelete