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

»

Importance and actions of cloud computing in e-commerce business

The e-commerce industry is growing in leaps and bounds, and, ...

»

How to remove Options from One Select Box and retain One Option?

One can easily remove  options of a select box from HTML and append ...

»

How to Ensure that Users Do Not Deactivate The Critical WordPress Plugins

It’s no secret that among all the remarkably useful features of ...

»

How to scroll to the top of a webpage using jQuery ?

If you are looking for an extraordinary method of smoothly scrolling ...

»

11 sources to gain perfect knowledge of html5 semantic tags

1. Html5tuts Html5tuts is a site dedicated to HTML5. Feel free to ...

»

How to move an element into another parent element using jQuery?

An important piece to the puzzle when coding with jQuery is that how ...

»

10 optionally Good WordPress Typography Plugins You could Opt For

It is not necessary that the person will follow the standard guide ...

»

8 creative 3d slider wordpress themes to keep your blog active

1. Display Display is a WordPress Theme best used for Portfolio and ...

»

11 quick remote screen sharing apps worth trying

1. Join Me Easy to start, easy to join, easy to manage, join.me takes ...