Animation using CSS3

CSS3 animations allows animation for most HTML elements without using JavaScript or Flash!

animate.css is a group of defined css classes having cross-browser animations. You can create stylish home pages, sliders, and general animation effects. Simply call animation.css in your project.

For Demo of css animation classes Click Here.

You can download animation.css from below url.

Click Here For downloading Animation.css.

How to make blinking text using CSS3

Sometime we required blinking text or link for highlighting purpose. There is no attribute in css for blinking text like text-decoration blink etc. But We can blinking/flashing text using css3 animation.

HTML

<p class="blink">Hello World</p>

CSS

.blink {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

Draw shapes using css

One of best cool features of CSS3 is that it reduces the use of images in web designs and allows you to create different shapes in CSS.

Commonforms that you usually see in Photoshop or Illustrator can now be done using CSS3. New CSS properties like transform and border-radius add complexity with shapes instead of creating them in drawing applications.

Examples:

Triangle

HTML

<span style="display: inline-block; width: 3em; height: 3em"><span style="position: relative; display: inline-block; width: 3em; height: 3em "><i style="position: absolute; display:inline-block; width:0; height:0; line-height:0; border:1.5em solid transparent; margin-top:-1.5em; border-bottom:1.5em solid #ff0000;left:0em; top:0em"></i></span></span>

CSS
.my-icon {
    position: relative;
}
.my-icon > i {
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    line-height: 0;
    border: 1.5em solid transparent;
    margin-top: -1.5em;
    border-bottom: 1.5em solid #ff0000;
    left: 0em;
    top: 0em;
}

 

Triangle

  


<style>
.my-icon1 {
position: relative;
}
.my-icon1 > i {
position: absolute;
display: inline-block;
width: 0;
height: 0;
line-height: 0;
border: 1.5em solid transparent;
border-left: 1.5em solid #1142AA;
border-bottom: 1.5em solid #1142AA;
left: 0em;
top: 0em;
}


</style>

<i class="my-icon1"><i></i></i>

Another Example of polygon


<i class="my-icon2"><i></i><i></i></i>


.my-icon2 {
    position: relative;
}
.my-icon2 > i {
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    line-height: 0;
    border: 0.8571428571428571em solid transparent;
    border-left: 0.8571428571428571em solid #1142AA;
    border-bottom: 0.8571428571428571em solid #1142AA;
    left: 0em;
    top: 0em;
}
.my-icon2 > i+i {
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    line-height: 0;
    border: 1.1785714285714286em solid #1142AA;
    border-right: 1.1785714285714286em solid transparent;
    left: 0.6428571428571428em;
    top: 6em;
}

Dynamic Css Generator which help in generating shapes in quick way.