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

»

Modern Changes That You Should Consider for Your Web Site

Websites need to modernize and get updated periodically otherwise ...

»

Super Tips For A Flawless Website

A website has a specific purpose. And your job is to design a website ...

»

Wix Offers Best Free Web Apps for Artists and Photographers

The famous online website builder Wix is known for providing the ...

»

What You Should Know Before Setting Up a Digital Marketing and Web Design Company

Running a digital marketing and web designing company can be a ...

»

Important Factors to Think About When Starting a Mailing List

Many bloggers and business owners don’t have a mailing list, ...

»

Tried and Tested Strategies for Boosting eBook Sales

As you have by now realized, writing your ebook was just the first ...

»

What Really Makes a Website User-Friendly

Whether it’s for business or personal use, having a website online ...

»

5 Features of Virtual Private Server that put you in complete Control of Your Website

For a decade now, virtual private server has been a preferred hosting ...

»

8 Ways the Right Ecommerce Platform Makes Your Business Perform Better

Starting your own ecommerce store is an exciting experience, but ...