January 23, 2015

How to animate icons or text with CSS?

Animation plays a vital role in CSS. It is really interesting while you play with animation. Here i tried to animate the down arrow icon. You can even animate any icons or images or text using this.

HTML

<i class="fa fa-angle-down" style="font-size: 100px"></i>

CSS

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

body {
  background-color: #000;
}

@-webkit-keyframes down {
    from{
        margin-top:0;
        opacity: 1;
       
    }
    to{
        margin-top: 50px;
        opacity: 0;
    }
}
i {
    color: #fff;
    -webkit-animation: down 2s linear infinite;
    -moz-animation: down 2s linear infinite;
    animation: down 2s linear infinite;
}

Attachments:

I have used external attachments.

//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
demo

4 comments:

  1. A very nice guide. I will definitely follow these tips. Thank you for sharing such detailed article. I am learning a lot from you.school branding uk

    ReplyDelete
  2. great technology found via your article and it's more interest to do first sight visitors also. keep do more interested thing via design article.
    School Rebranding UK

    ReplyDelete
  3. Hi,
    from your post i got technical kind of information for how to attract the customer via the internet and through the internet application how to serve valuable things. it makes easier and very helpful.
    thanks,
    IELTS coaching classes in chennai

    ReplyDelete

Popular Posts

Views