Header Animating Entrance Effect for Blogger

xxxxxxxxxxxxxxxxxxxxx

Not only for blogger but every one using HTML and web languages to display their blog or website. This is a small animating effect created using CSS3 to give an exclusive look to your website.
The new CSS transform and animation can create awesome effect if used the correct way. And being a web designer who is still learning I get to learn about new techniques everyday but I don't always share it on my blog for blogger users who are not experts in using these technologies. I decided to post at least one add-on effect for blogger users every week and this is the first one.

In this tutorial I will tell you how to make an animated entrance effect for the blog's title heading in blogger (can be used on any site by using the correct selectors). Here's the demo and file download link.
Preview Download File

To add this to blogger follow these instruction below
Adding the CSS
In most of our tutorials we first add HTML and then the CSS, but here will add the style code before editing the HTML. The CSS we need to create this entrance effect, is a long code, but don't worry, it won't slow down your site.

Here's the code we are going to use :

/* Animation Effect - Credit goes to Dan Eden @_dte */
@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
   
    40% {
        -webkit-transform: perspective(400px) rotateY(-30deg);
    }
   
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
    }
   
    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInY {
    0% {
        -moz-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
   
    40% {
        -moz-transform: perspective(400px) rotateY(-30deg);
    }
   
    70% {
        -moz-transform: perspective(400px) rotateY(10deg);
    }
   
    100% {
        -moz-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInY {
    0% {
        -o-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
   
    40% {
        -o-transform: perspective(400px) rotateY(-30deg);
    }
   
    70% {
        -o-transform: perspective(400px) rotateY(10deg);
    }
   
    100% {
        -o-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
   
    40% {
        transform: perspective(400px) rotateY(-30deg);
    }
   
    70% {
        transform: perspective(400px) rotateY(10deg);
    }
   
    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    -moz-backface-visibility: visible !important;
    -moz-animation-name: flipInY;
    -o-backface-visibility: visible !important;
    -o-animation-name: flipInY;
    backface-visibility: visible !important;
    animation-name: flipInY;
}

.animated {
    -webkit-animation-duration: 1.4s;
       -moz-animation-duration: 1.4s;
         -o-animation-duration: 1.4s;
            animation-duration: 1.4s;
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
}

You know how to add this CSS in your blogger blog. Or if you don't know, then this post will help you http://www.stramaxon.com/2012/03/how-to-add-css-to-your-blogger-blog.html

Thanks to Dan Eden for creating such good effects with CSS animation and transform, Here are some more animation effect on his site http://daneden.me/animate/

The first step in order to add this effect is complete, now you need to do some HTML edits to make it work. See the next step.
Editing the HTML
To animate the entrance of your blog's title heading, we have to edit its HTML in the template. To do that go to your Blog Dashboard -> Template -> Edit HTML -> Check mark Expand Widget Template -> Now use CTRL+F to find the following code


<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>

The code on your template might look different if you have enable background images or other settings, but the code will always contain the b:include wrapped inside it. Find it using the first few letters of the code you will find it.

Now change add animated flipInY in the class attribute of the heading element <h1 class='title' the code should look like this (notice the first line)

<h1 class='title animated flipInY' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
Note: The HTML code is two times in the template, you have to edit both codes.

Not only blog's header but you can do this for any element on your blog page just by adding animated flipInY as class name to the element.