As we all know CSS3 is hot these days and will soon kill javascript libraries. I have tried today some cool animations using CSS3 for webkit browsers (e.g. Google Chrome and safari).
I think days are near when developers will soon eradicate js librararies. Well , not taking much time , lets start.
.
Have a look on DEMO . Please try on latest webkit browsers such as safari and chrome.
Effect 1: Fade Block
Copy and paste HTML inside body tag:
1 |
Place mouse on me i will fade! |
and CSS is:
1 2 |
#fade{opacity: 1;-webkit-transition: opacity 1s linear;}
#fade:hover{opacity: 0;}
|
.
Effect 2: Pulsate Block
Copy and paste HTML inside body tag:
1 |
Place mouse on me i will pulsate! |
and CSS is:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#pulsate:hover {-webkit-animation-name: pulsate;-webkit-animation-duration: 20s;-webkit-animation-timing-function: ease-in-out;} @-webkit-keyframes pulsate { 0% { width:140px; } 5% { width:190px; left:-25px; } 10% { width:140px; left:0px; } 15% { width:190px; left:-25px; } 20% { width:140px; left:0px; } 40% { width:140px; } 45% { width:190px; left:-25px; } 50% { width:140px; left:0px;} 55% { width:190px; left:-25px;} 60% { width:140px; left:0px;} 80% { width:140px; } 100% { width:140px; } }
|
.
Effect 3: Nudge
Copy and paste HTML inside body tag:
1 |
Place mouse on me my text will shift! |
and CSS is:
1 2 |
#nudge{-webkit-transition-property:color,background-color,padding-left;-webkit-transition-duration:500ms,500ms,500ms}
#nudge:hover{background-color:#efefef;color:#333;padding-left:50px}
|
.
Effect 4: Expand Block
Copy and paste HTML inside body tag:
1 |
Place mouse on me my border will expand |
and CSS is:
1 2 |
#expand{background-color:#eee;-webkit-transition: all 500ms linear; border:10px solid black}
#expand:hover{border:30px solid #800}
|
.
Effect 5: Bounce Block
Copy and paste HTML inside body tag:
1 |
Place mouse on me i will bounce! |
and CSS is:
1 2 3 4 |
#bounce:hover {-webkit-animation-name:bounce;-webkit-animation-duration:1s;-webkit-animation-iteration-count:2;-webkit-animation-direction:alternate} @-webkit-keyframes bounce{from{margin-left:0px;} to{margin-left:250px;} }
|
.
Effect 6: Spin Block
Copy and paste HTML inside body tag:
1 |
Place mouse on me i will spin |
and CSS is:
1 2 |
#spin{-webkit-transition: -webkit-transform 3s ease-in;}
#spin:hover{-webkit-transform:rotate(360deg)}
|
.
Effect 7: Accordion
Copy and paste HTML inside body tag:
1 2 3 4 5 |
This is first tab
|
and CSS is:
1 2 3 4 5 6 7 |
.accordion a{display:block;padding:5px 10px;background-color:#333;color:#eee;text-decoration:none}
.accordion a:hover{background-color:#999}
.accordion div{background-color:#ccc;color:#222;}
.accordion div p{padding:20px}
#accordion div{height:0;overflow:hidden;-webkit-transition:height 600ms ease}
#accordion div:target{height:110px}
|
.
Check out the Final DEMO
That’s all!
Cheers!
Interested in 1z0-051 certification? Sign up for online 642-654 training to pass 642-374 exam on time.
