7 javascript-effect alternatives using CSS3 for webkit browsers


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!

Recently Published

»

How to Show Related Posts in WordPress Without a Plugin?

Making your visitors go through each post increases the browsing time ...

»

Noteworthy Facts About Android App Piracy and How It Can Be Dealt With

Are you a gaming aficionado, and obsessed with gaming apps? Do you ...

»

4 Great Ways to Turn Your Images into SEO Tools

Photos on a website help us to understand the website much more ...

»

8 Search Form Tutorials Built With CSS3, jQuery & HTML5

Elevate the power of search by adding search functionality or search ...

»

10 Best HTML5 Frameworks For Hybrid App Development

Hybrid apps are generally built around native web view container or ...

»

A Look at The Evolution Of WordPress and What Future Holds For It

When it comes to developing a website, WordPress is the first name ...

»

7 WordPress Plugins That Make Your Site Mobile Responsive

Not much in the recent past, having a responsive website that works ...

»

Things you should Consider When You Are Designing an E-commerce Website

The people of today’s generation have discovered the various ...

»

Developing a Mobile App Using Open Source Software? Consider These Tips For Security

Today, almost every IT organization (including the Fortune 500 ...