Make effective CSS3 animation

Now these days one of the talked about feature of modern browsers is CSS3, you can create lots of cool and impressive stuff with the help of CSS3 and if we talking about animation, then you don’t have to use JavaScript to create animation of your DOM element. CSS3 has some overbearing properties that provide smooth animation.

This is a small example of CSS3 animation, hope you guys enjoying it. So what we have to do, first we have to prepare our DOM elements, take a look on blow example:

<div class="intro">
    <div class="left-brack">{</div>
    <div class="middle-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam massa, in pharetra nunc. In sodales sem at leo scelerisque pulvinar. Pellentesque in ipsum tellus.</p></div>
    <div class="right-brack">}</div>
</div>

So we have prepared our html now its time to beautify these DOM stuffs with some CSS, so that it look pretty better then normal elements.

.intro{
position: relative;
width: 400px;
clear: both;
display: block;
height: 60px;
}

.intro .left-brack,
.intro .right-brack{
font-size: 54px;
position: absolute;
width: 20px;
top: -6px;
font-weight: bold;
color: #ff6600;
}

.intro .left-brack{
animation: left-brack-intro 1s ease-in-out 0.25s;
animation-fill-mode: backwards;
}

.intro .right-brack{
animation: right-brack-intro 1s ease-in-out 0.25s;
animation-fill-mode: both;
}

.intro p{
font-family: 'Rambla', sans-serif;
font-size: 13px;
}

.intro .middle-content{
position: absolute;
width: 340px;
left: 33px;
top: 7px;
height: 50px;
overflow: hidden;
}

.intro .middle-content p{
text-align: justify;
animation: fade-in 0.5s ease-in-out 0.75s;
animation-fill-mode: backwards;
}
[/css]

As you see in above section, we have used CSS property: animation, it could be various according to browser support like:
[css]
animation: fade-in 0.5s ease-in-out 0.75s;
-moz-animation: fade-in 0.5s ease-in-out 0.75s;
-webkit-animation: fade-in 0.5s ease-in-out 0.75s;
-o-animation: fade-in 0.5s ease-in-out 0.75s;
-ms-animation: fade-in 0.5s ease-in-out 0.75s;

Creating CSS3 animation hierarchy:

In this animation property we have used the animation-name, animation-duration, animation-timing-function and animation-delay respectively. This animation-name notify a @keyframes that defines the property and values for the animation hierarchy.

@keyframes left-brack-intro{
0%{
left: 175px;
opacity: 0;
}
50%{
left: 175px;
opacity: 1;
}
100%{
left: 0px;
}
}

@keyframes right-brack-intro{
0%{
right: 175px;
opacity: 0;
}
50%{
right: 175px;
opacity: 1;
}
100%{
right: 0px;
}
}

@keyframes fade-in{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}

And that’s it. Hope you guys enjoying this article and found it informative. I’d like to hear your comments about CSS animation.

Creating CSS3 animation hierarchy:

Related posts: