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 | <div id="fade">Place mouse on me i will fade!</div> |
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 | <div id="pulsate">Place mouse on me i will pulsate!</div> |
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 | <div id="nudge">Place mouse on me my text will shift!</div> |
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 | <div id="expand">Place mouse on me my border will expand</div> |
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 | <div id="bounce">Place mouse on me i will bounce!</div> |
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 | <div id="spin">Place mouse on me i will spin</div> |
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 | <div id="accordion" class="accordion"> <a href="#first">This is first tab</a><div id="first"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <a href="#second">This is second tab</a><div id="second"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <a href="#third">This is third tab</a><div id="third"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> |
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!
Comments
Excellent post, really enjoyed the examples. I have started using CSS3 on my site instead of Javascript and loving it so far…
Thanks for your feedback
hey this blog is great. I’m glad I came by this blog. Maybe I can contribute in the near future. PM ME on Yahoo AmandaLovesYou702 Thank you day481
Thanks in advance for your kind and generous input.
As great as these effects are, I am struggling to understand what is the difference between these and old IE effects. Apart from being “new and shiny” (IE was too 10 years ago), every one of them requires a non standards compatible browser that locks you in. What is the difference between coding only for IE6 and coding only for webkit?
Yeah, I am same as Jarek, I didn’t understand how i compare the old and new one.
hey man come on this is good stuff
Fantastic article, keep up the good work.
this is a pretty good webkit, a+
I have tried today some cool animations using CSS3 for webkit browsers
currently studying me with Javascript and CSS. This tutorial is very useful for my learning. I want to practice and try to run the source code available. thanks for sharing.
I am posting here just to let you know that you are doing a good job by keeping us posted about this. Please keep on posting such quality articles as this is a rare thing to find these days. I am always searching online for articles that can help me. Thank you
This was a useful post and I think it is rather easy to see from the other comments as well that this post is well written and useful. Keep up the good work.
I have used 4 effects out of 7 on CSS3. Mostly developers are preferring to work on CSS3 instead of JavaScript.
Yeah, I am same as Jarek, I didn’t understand how i compare the old and new one.
I tend to get on better with CSS3, im not sure if others would agree with me.
Thank you for this blog. Thats all I can say. You most definitely have made this blog into something thats eye opening and important. You clearly know so much about the subject, youve covered so many bases. Great stuff from this part of the internet. Again, thank you for this blog.
Thanks for the info. I am bookmarking this page of reference.
I’m also going to blog about that.
THANKS FOR SHARING
Very nice post. I really enjoy the reading. I come here from the google while searching for some good article.
Isn’t it great to know that there are alternatives using CSS3 javascript for webkit browsers? I’ve been trying to use other types, but it’s not perfectly good alternative. But hey! Thanks for sharing this.
-LeslieDallas
Thanks for sharing this article…it was very nice…
This is a good post. This post give truly quality information.I’m definitely going to look into it.Really very useful tips are provided here.thank you so much.Keep up the good works
nts
I am happy to find this post very useful for me, as it contains lot of information. I always prefer to read the quality content and this thing I found in you post. Thanks for sharing
Thanks for a nice share you have given to us with such an large collection of information. Great work you have done by sharing them to all. simply superb.