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.
really good post about css3 tghanks alot it helped me alot..
Very nice animations Steve, love the spin block.
Good post! I am also going to write a blog post about this… thanks
Good read. Needed more pictures though.
Great info.I like all your post.I will keep visiting this blog very often.It is good to see you verbalise from the heart and your clarity on this important subject can be easily observed. Thanks again!
Your
This is a nice blog. Good clean UI and nice informative blog. I will be coming back soon, thanks for the great blog. I put a link to your blog at my site, hope you don’t mind? Comments
I found this web-site by on a fluke when I was exploring on Google then I arrived onto your site. I’ve to speakyour world-wide-web webpage is pretty cool I honestly loveyour theme!
So informative things are provided here,I really happy to read this post,I was just imagine about it and you provided me the correct information I really bookmark it,for further reading,So thanks for sharing the information.
Very good points Melissa. You have to walk a fine line though if your services our on the higher end though.
mmmm, I think you may be right in what you have said in this post. Whoever there are many people will disagree with you.
If possible, as you gain expertise, would you mind updating your blog with extra information? It is extremely helpful for me.
I completely agree and I just wanted to say that I really like your blog. Is it WordPress based?
Your post gave me some nice new thoughts – a very solid read.
Thank you very much for the code sniplets
The Demo Looks great on chrome Steve, I am going to give CSS3 a try on a few of my site at the end of the summer.
It’s really great post. I would like to appreciate your work and would like to tell to my friends.
Thanks for sharing
Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful.
I have tired some of Javascript for my webiste.
Cool post.
Nice article…..I really impressed while reading your post…..Thank you so much , it will useful to every one….
Is it real or not?
Your post gave me some nice new thoughts – a very solid read.
Nice guidelines about CSS. Thank you!
Thank goodness we found this guide. We are travelling to Shanghai this fall -with our pet – and this provides alot of good information.
Great post! I would also recommend the book E-myth, every entrepreneur should give it a read.
very good guide about css and nice animations helped me alot
The demo looks pretty good.
this is what i am looking for. wow! thanks steve! great tutorial! very detailed.
Always good to see, this was a brilliant post.
Excellent post, really enjoyed the examples. I have started using CSS3 on my site instead of Javascript and loving it so far…
The demo looks pretty good.
I have started using CSS3 on my site instead of Javascript and loving it so far
We do always customizing browser, I’m having fun on it.
I can tell that you understand this topic, well written and nice job.This is something I’ll be submitting to Reddit.You should do more posts around this topic matter.I’ll check back often, I’m glad I came across your site.
Great minimalist designs. I’m a firm believer in the k.i.s.s. design method. After all, most of the biggest sites on the web use minimalistic designs, like Google, eBay, Amazon, etc. As long as it’s a good user interface, minimalist design is a great choice.
I enjoyed reading this, do you twitter?
Oh man, thank you for writing this.
I hope you don’t mind me linking you so that this information spreads more.
Your blog provided us with valuable information to work with. Thanks a lot for sharing. Keep blogging.
great stuff…i have a question about the accordian….is there a way to make it open and close a bit smoother? as when i click, it seems to jerk the whole page up or down….thanks in advance for your help! i subscribed to your blog today
I feel strongly about information and love learning more on this.
great read! this may seems so technical but you made it easier to comprehend for us non-technical people. thanks for sharing Steve!
It is what I am looking for.
Thank you very much. I am wonderring if i can share your article in the bookmarks of society，Then more friends can talk about this problem.
Excellent article, thanks very much for this information.
While I am reading this post, I really learned a lot. This help me to widen my knowledge about what is your theme is. Thanks a lot for this information.
Thank you for sharing this article with us. I enjoy it!
Thank you for sharing those codes. Very useful for webmasters.
I have tried today some cool animations using CSS3 for webkit browsers
Tres intéressant.
Always good to see, this was a brilliant post.
Personally I’d have to say that I agree, it’s obvious that you know what you are talking about.This is something I’ll be submitting to Reddit.I’m thinking this is the best post I’ve read on your blog yet.I’ll be back for sure, excellent stuff.
Very significant article for us ,I think the representation of this article is actually superb one.This is my first time to visit your site.I definitely bookmark it for sharing with my friend.
Hey. I’ve booked marked your site and am about to send it to a few friends of mine that I am certain would love reading.Great share.
I would like to thank you for the efforts you have made in writing this article.
Thanks for your blog, big help.
Hello. Great job. I did not expect this on a Wednesday. This is a great story. Thanks!
I absolutely adore reading your posts, your fashion of writing is outstanding.This article as usual was helpful, I have had to bookmark your site and subscribe to your feed in googlereader. Your site looks lovely.
Thanks for this awesome piece of news!
Your Comments. Good job. Keep it up.
Very ncie site. good job.
Cool post very informative I just found your site and read through a few posts although this is my first comment, i’ll be including it in my favorites and visit again for sure .
Thanks for this.
great article that you describe. I agree with that because it provides benefits.
I see java is also good and easy use and with CSS new versions one want to have more flexible methods and good design and programming tools .
It is good news .
Beautiful design, nice site. I really like it. Bob.
COOL!~IT’s very helpful to me thank!!
Thanks for posting and sharing with all – Cheers
I enjoyed reading your blog. Keep it that way. dswycskiroixpppl
I really increased my knowledge after read your post which will be beneficial for me.
Another Good post, I will be sure to bookmark this in my Propeller account. Have a great day.
a very good post by the author hope to come back more really soon.
Love the concept of having modern browsers display these little extra added touches while not impacting on older browsers. Progressive Enhancement is the buzz word of the day!
Best you should make changes to the post subject title 7 javascript-effect alternatives using CSS3 for webkit browsers | Web Developer Juice to something more suited for your webpage you make. I enjoyed the the writing still.
I really enjoy your blog
I want to thank you for sharing the following info. I’ve just discovered how to use the world wide web and am just catching up to these young whippersnappers.
thanks for sharing .:)
CSS3 is something that is really usefull for a website.
Each and every occasion I notice a really very good post I do a few things: 1.Discuss it with all the (blank) colleagues .2.save it in all of the favorite social sharing web-sites.(blank).Make sure to return to the website where I read the post. After reading this post I am seriously concidering doing all 3! ))))
I really enjoyed reading this post, big fan. Keep up the good work and
please tell me when can you publish more articles or where can I read
more on the subject? Thank you on behalf of the team. we will really appreciate you for your upcoming blast
also.
Currently I am looking for a great resource using java script .. we are a team creating a project right now and we cannot complete it if we cannot find an example to our project.
Is css is as easy as using java?
I’ve been around for quite a lot of time, but finally decided to show my appreciation of your work! Just want to say what a great blog you got here!
This post shows the information which is close to standard.