DMCA.com Follow us on Facebook

CSS3 Examples Part II (animations)

By Tanya Simkin-Reva

Many scripts can be substituted with CSS3 too. We do not need a script any longer if we want to achieve these types of effects:

Read More anchor on hover

button
View live demo or view live web template

How it is done:

Markup:

    
	

CSS:

/*-----3D TEXT----*/
.jump-link a{
	text-indent:50px;
	line-height:36px;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	background: url(arrow.png) 0 0;
	background-repeat:no-repeat;
	height:43px;
	display:block;
	text-transform:lowercase;
	font-size:1.2em;
	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	text-decoration:none;
	color:#f83902;
}
.jump-link a:hover{
	background: url(arrow.png) 0 -43px;
	background-repeat:no-repeat;
	height:43px;
}
	

To get the effect in this example, we used a background image combined with CSS3 transitions.

Glowing buttons

button
View live demo (please preview in Chrome, Safari or Firefox)

How it is done:

Markup:

	 
	

CSS:

/*-----GLOWING BUTTONS----*/
.button-act{
	float:left;
	width:100%;
}
.button-act a{
	margin-right:10px;
	text-decoration:none;
	display:inline-block;
	padding:10px 20px;
	text-transform:uppercase;
	letter-spacing:.1em;
	text-align:center;
	color:#fafafa;
	
    -webkit-border-radius: 4px; 
	-moz-border-radius: 4px; 
	-o-border-radius: 4px; 
	-ms-border-radius: 4px; 
	border-radius:4px;
	
    -webkit-box-shadow: 0 1px 1px rgba(221,221,221,.2); 
	-moz-box-shadow:0 1px 1px rgba(221,221,221,.2); 
    -o-box-shadow: 0 1px 1px rgba(221,221,221,.2);  
    -ms-box-shadow: 0 1px 1px rgba(221,221,221,.2);  
	box-shadow:0 1px 1px rgba(221,221,221,.2); 
	
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
}
a.green{
	background:#9da95b;	
    -webkit-animation-name: thePulse-green;
    -moz-animation-name: thePulse-green;
}
a.green:hover{
	background:#838f42;
}
@-webkit-keyframes thePulse-green {
from { background-color: #838f42; -webkit-box-shadow:: 0 0 9px #6a813d; }
50% { background-color: #9da95b; -webkit-box-shadow:: 0 0 18px #b4c162; }
to { background-color: #838f42; -webkit-box-shadow:: 0 0 9px #6a813d; }
}
@-moz-keyframes thePulse-green {
from { background-color: #838f42; -moz-box-shadow:: 0 0 9px #6a813d; }
50% { background-color: #9da95b; -moz-box-shadow:: 0 0 18px #b4c162; }
to { background-color: #838f42; -moz-box-shadow:: 0 0 9px #6a813d; }
}

a.orange{
	background:#ee5c14;	
    -webkit-animation-name: thePulse-orange;
    -moz-animation-name: thePulse-orange;
}
a.orange:hover{
	background:#cc3816;	
}
@-webkit-keyframes thePulse-orange {
from { background-color: #cc3816; -webkit-box-shadow:: 0 0 9px #e16122; }
50% { background-color: #ee5c14; -webkit-box-shadow:: 0 0 18px #ee5c14; }
to { background-color: #cc3816; -webkit-box-shadow:: 0 0 9px #e16122; }
}
@-moz-keyframes thePulse-orange {
from { background-color: #cc3816; -moz-box-shadow:: 0 0 9px #e16122; }
50% { background-color: #ee5c14; -moz-box-shadow:: 0 0 18px #ee5c14; }
to { background-color: #cc3816; -moz-box-shadow:: 0 0 9px #e16122; }
}

a.blue{
	background:#0fbdbf;	
    -webkit-animation-name: thePulse-blue;
    -moz-animation-name: thePulse-blue;
}
a.blue:hover{
	background:#08b2b4;
}
@-webkit-keyframes thePulse-blue {
from { background-color: #08b2b4; -webkit-box-shadow:: 0 0 9px #e16122; }
50% { background-color: #129a9c; -webkit-box-shadow:: 0 0 18px #4debed; }
to { background-color: #08b2b4; -webkit-box-shadow:: 0 0 9px #e16122; }
}
@-moz-keyframes thePulse-blue {
from { background-color: #08b2b4; -moz-box-shadow:: 0 0 9px #e16122; }
50% { background-color: #129a9c; -moz-box-shadow:: 0 0 18px #4debed; }
to { background-color: #08b2b4; -moz-box-shadow:: 0 0 9px #e16122; }
}

a.yellow{
	background:#fbb438;	
    -webkit-animation-name: thePulse-yellow;
    -moz-animation-name: thePulse-yellow;
}
a.yellow:hover{
	background:#eba52b;
}
@-webkit-keyframes thePulse-yellow {
from { background-color: #fbb438; -webkit-box-shadow:: 0 0 9px #be8b33; }
50% { background-color: #eba52b; -webkit-box-shadow:: 0 0 18px #efb755; }
to { background-color: #fbb438; -webkit-box-shadow:: 0 0 9px #be8b33; }
}
@-moz-keyframes thePulse-yellow {
from { background-color: #fbb438; -moz-box-shadow:: 0 0 9px #be8b33; }
50% { background-color: #eba52b; -moz-box-shadow:: 0 0 18px #efb755; }
to { background-color: #fbb438; -moz-box-shadow:: 0 0 9px #be8b33; }
}
	

It is not difficult to style glowing effects, however, it requires some amount of code to be written. We use CSS3 key-frames which currently only work in webkit browsers (Safari and Chrome) and Firefox. The 10th version of IE intends to support key-frames as well.

Animated price badge. Scaling effect on hover

scaling badge
View live demo or view live web template

Here you can hover over the price badge to see the scaling effect. We used an image and CSS3 transforms, scaling the image to 1.3 degrees to get the desired effect.

How it is done:

Markup:

	
	

CSS:

/*-----SCALING EFFECT----*/
img#badge{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	 transition: all 500ms ease;
	 width:80px;
	 height:80px;
}
img#badge:hover{
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -o-transform: scale(1.3);
    -ms-transform: scale(1.3); 
	transform:scale(1.3);
}
	

Animated CSS3 tooltip with transitions and small triangle

tooltip
View live demo

Another example is a CSS3 tooltip without background image. The small triangle is achieved by setting some certain values for the borders. We also added CSS3 shadows and transitions. The tooltip smoothly appears and disappears under the highlighted phrase (it can be image as well). To get this effect we apply set of styles to anchor and span inside which the tooltip is actually nests. Tooltip is absolutely positioned relatively to the anchor. If we need to add several tooltips to the article we may need to position them differently. Plus we can style them differently (in our example we have three tooltips: grey on the left side and orange one the right side in text block and another one for an image in the images row).

How it is done:

Markup:

Cum no probo oratio nostrud, our first tooltip is hereCSS3 tooltip with transitions and triangle. definitionem nam id, cu est fugit singulis. Nisl facilisi duo ex. Ad delicata quaerendum mea, legere electram consectetuer ne vim. Ut nec aliquando vulputate. Est ut audire torquatos. Probo oratio nostrud, latine definitionem nam id, cu est fugit singulis. Nisl facilisi duo ex. Ad delicata quaerendum mea, our second tooltip is hereCSS3 tooltip with transitions and triangle. electram consectetuer ne vim. Ut nec aliquando vulputate. Est ut audire torquatos. No probo oratio nostrud, latine definitionem nam id, cu est fugit singulis. Nisl facilisi duo ex. Ad delicata quaerendum mea, legere electram consectetuer ne vim. Ut nec aliquando vulputate. Est ut audire torquatos.

CSS:

/*---TOOLTIP STYLES---*/
a.tooltip{
    outline: none;
    text-decoration:none;
    color:#f83902;
    position:relative;
}
a.tooltip span{
    height: auto;
    pointer-events: none;
    position: absolute;
    left:0;
    bottom:100px;
    z-index:1;
    opacity: 0;
    padding: 10px;
    font-family: Helvetica, Arial, sans-serif;  
    text-align: center;
    border: 6px solid #fff;
    border-radius: 5px;
    box-shadow: 2px 10px 10px rgba(0,0,0,0.2);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
/*over text*/
a.tooltip span.grey:before, a.tooltip span.orange:before,
a.tooltip span.grey:after, a.tooltip span.orange:after{
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left:-11px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(0,0,0,0.1);
}
a.tooltip span.grey:after, a.tooltip span.orange:after{
    bottom: -14px;
    margin-left: -10px;
    border-top: 10px solid #fff;
}
/*over image*/
a.tooltip span.pic:before,
a.tooltip span.pic:after{
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left:-11px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgba(0,0,0,0.1);
}
a.tooltip span.pic:after{
    top: -14px;
    margin-left: -10px;
    border-bottom: 10px solid #fff;
}
a.tooltip:hover span.grey, a.tooltip:hover span.orange{
    opacity: .95;
    bottom:30px;
}
a.tooltip:hover span.pic{
    opacity: .95;
    bottom:0;
}
.grey{
	background:#28292d;
    color: #02f8aa;
    font-size:.8em;
}
.orange{
	background:#f83902;
    color: #f0f0f0;	
    font-size:.8em;
}
.pic{
	background:#774F38;
	color:#E08E79;
	font-weight:700;
	font-size:.9em;
}
	

Pay attention to how we style a small triangle, we use pseudo-elements :before and :after and create the triangle with borders:

a.tooltip span:before,
a.tooltip span:after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(0,0,0,.1);
}
	

CSS3 accordion

accordion
View live demo

One more example of what can be done with CSS3 is an accordion. Thanks to CSS transitions, the accordion opens and closes smoothly and no javascript is required. There are a few techniques of creating CSS accordions, one of them is the use of the input checkbox and the labels–elements which we are accustomed to use whe we create ordinary Contact forms. The 'click' on the hidden input opens and closes panels complete with content, CSS3 transitions helps to open and close the panels smoothly, gradients and shadows create nice visual effect. These types of accordions can contain any type of html content whether it is text, image or iframe. The original tutorial is here, the example below is styled a little differently, has some modifications in markup and is calculated in percents (except the panel height, which is fixed and set in pixels).

How it is done:

Markup:

Cum no probo oratio nostrud, definitionem nam id, cu est fugit singulis. Nisl facilisi duo ex. Ad delicata quaerendum mea, legere electram consectetuer ne vim. Ut nec aliquando vulputate. Est ut audire torquatos. Probo oratio nostrud, latine definitionem nam id, cu est fugit singulis. Nisl facilisi duo ex. Ad delicata quaerendum mea, electram consectetuer ne vim.

Cum no probo oratio nostrud, definitionem nam id, cu est fugit singulis. Nisl facilisi duo ex. Ad delicata quaerendum mea, legere electram consectetuer ne vim. Ut nec aliquando vulputate. Est ut audire torquatos. Probo oratio nostrud, latine definitionem nam id, cu est fugit singulis. Nisl facilisi duo ex. Ad delicata quaerendum mea, electram consectetuer ne vim.

CSS:

/*---CSS ACCORDION---*/
.accordion-box{
    width: 100%;
    float:left;
}
label{
	font-family: Helvetica,  Arial, sans-serif;
	text-transform:capitalize;
	padding: 0 0 0 40px;
	height:60px;
	position: relative;
	z-index: 20;
	display: block;
	cursor: pointer;
	color: #bebebe;
	line-height: 60px;
	font-size: 1.4em;
	background: #ffffff;
	background: -moz-linear-gradient(top, #fafafa 1%, #eaeaea 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#fafafa ), color-stop(100%,#eaeaea));
	background: -webkit-linear-gradient(top, #fafafa  1%,#eaeaea 100%);
	background: -o-linear-gradient(top, #fafafa  1%,#eaeaea 100%);
	background: -ms-linear-gradient(top, #fafafa  1%,#eaeaea 100%);
	background: linear-gradient(top, #fafafa  1%,#eaeaea 100%);
	box-shadow: 
		0px 0px 0px 1px rgba(155,155,155,0.3), 
		1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
		0px 2px 2px rgba(0,0,0,0.1);
}
label:hover{
	background: #f0f0f0;
}
input:checked + label,
input:checked + label:hover{
	background: #f83902;
	color: #f0f0f0;
}
label:hover:after,
input:checked + label:hover:after{
	content: '';
	position: absolute;
	width: 28px;
	height: 28px;
	right: 40px;
	top: 16px;
	background: transparent url(arrow-down.png) no-repeat center center;	
}
input:checked + label:hover:after{
	background-image: url(arrow-up.png);
}
input{
	display: none;
}
article{
	background: rgba(255, 255, 255, 0.5);
	margin-top: -1px;
	overflow: hidden;
	height: 0;
	position: relative;
	z-index: 10;
	-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
article p{
    padding:40px;
}
/*article#first{
	height:300px;*/
}
input:checked ~ article{
	-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	box-shadow: 0 0 0 1px rgba(155,155,155,0.1);
}
input:checked ~ article{
	height:380px;
}
	

Pay attention to these lines of code:

/*article#first{
	height:300px;*/
}
	

All panels in this demo are closed by default, but if you wish one panel to have opened you have an option to declare article’ height in css file and assign id to the article tag (in our example the open panel got #first). Otherwise you can remove these two lines of code from your CSS document.

Examples Part III (complicated effects combined with javascript)

Rotating, scaling layout for website

layout
View live web template (Please preview in Chrome, Safari or Firefox only)

The website layout in the example above is built upon a combination of javascript and CSS3 transitions/transforms. It is a pretty complex structure which currently only works in webkit browsers (Safari + Chrome) and Firefox. Opera and IE currently do not support CSS3 transforms, therefore the layout is displayed differently.

Falling objects effect: falling and fading

layout
View live web template (Please preview in Chrome and Safari only)

This smoothly falling and fading leaves effect is achieved by applying a combination of javascript and CSS3 transitions. A rich set of CSS3 features were used (transitions, key-frames, transforms, etc.). It currently works only in webkit browsers (Safari and Chrome). Below, you can see just a small part of the styles applied:

     -webkit-animation-iteration-count: infinite;
     -webkit-animation-direction: alternate;
     -webkit-animation-timing-function: ease-in-out;
     -webkit-transform-origin: 50% -100%;
     
@-webkit-keyframes fade
{
    /* Show a leaf while into or below 95 percent of the animation and hide it, otherwise */
    0%   { opacity: 1; }
    95%  { opacity: .7; }
    100% { opacity: 0; }
}

@-webkit-keyframes clockwiseSpin
{
    /* Rotate a leaf by -50 degrees in 2D space at the start of the animation */
    0%   { -webkit-transform: rotate(-50deg); }
    /*  Rotate a leaf by 50 degrees in 2D space at the end of the animation */
    100% { -webkit-transform: rotate(50deg); }
}
   

As you can see the possibilities of applying CSS3 is limitless and promise to be extended more in the near future. Well, let’s start now and happy coding to all of us!

Previous - CSS3 Capabilities and Examples Part I


Copyright © 2016 HTML5 Templates Dreamweaver.com