CSS3 Animation Effects with Keyframes
Wall Script
Wall Script
Tuesday, June 17, 2014

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 Animation Effects with Keyframes


Download Script     Live Demo 1     Live Demo 2     Live Demo 3

CSS3 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%
{
opacity1;
}
25%75%
{
opacity0;
}

}

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

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

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>

Image Animations Live Demo

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>

Status Message Live Demo

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

23 comments:

  1. Awesome effects thanks for sharing it with us

    ReplyDelete
  2. Nice tutorial Dude.. i dont knw much about CSS3 , But this is really good

    ReplyDelete
  3. Last 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 !!

    ReplyDelete
  4. Really concise info about css3 animations

    ReplyDelete
  5. nice your website and can you guide me iam sending message to face book

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete

mailxengine Youtueb channel
Make in India
X