CSS3 Animation Effects with Keyframes

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.

CSS3 Keyframe Syntax

<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>

HTML5 Code

<!doctype 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

<!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>

Delete 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>

HTML 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>