Friday, September 21, 2012

Nifty hover effects with CSS3 animations

hover effects

The idea was to create two different kinds of animations for both hover over and over out with just CSS3. The over out animation shouldn't be the reverse version of animation for hover over.

HTML MarkUp

Please note that the entire markup shown here was simplified version of demo, but you will see the complete markup in source files, of course.

Our HTML markup contains two elements, one for hovered object and other as its child element. I will name them as "object" and "child".

<div class="object">
   <span class="child">Some Text</span>
</div>

CSS

Also, please note that in following CSS code I will ignore all the browser vendor prefixes, but in the real environment you should include them as well.

First let's style our object and child. I change the shape of object to circle using CSS3 border-radius properties and apply some gradient effect on it through inset box-shadow properties.

.object {
   color: #003E49;
   background-color: #87e0fd;
   border: 3px solid rgba(255,255,255,0.5);
   border-radius: 100px;
   box-shadow:7px 8px 16px white inset, -3px -8px 44px #9b7400 inset;
}

.child {
   display: block;
   font-weight: bold;
   text-transform: uppercase;
   font-family: Impact, Charcoal, sans-serif;
   text-shadow: 0 1px 2px #CCF7FF;
}

CSS3 Animations

Next, apply hover over animation on object when hovered using :hover pseudo-class. For hover out animation, we can apply on the class itself (no pseudo-class).

.object {
   transform-origin:50% 10%;
   animation-name: hoverover;
   animation-duration: 0.3s;
   animation-timing-function: ease-in-out;
} 

.object:hover {
   animation-name: hoverout;
   animation-duration: 0.4s;
}

There is no need to define all animations properties again for :hover pseudo-class since it will inherit from parent, unless we want the value to be different from parent.

Same goes to child when object hovered.

.object .child {
   animation-name: movedown;
   animation-duration: 0.3s;
   transform: translateY(0);
}

.object:hover .child {
   animation-name: moveup;
   animation-duration: 0.4s;
   transform: translateY(-20px);
}

Remember to include final value in :hover class if the value of final animation differ from initial value.

After that, simply define your keyframes for these animations.

/* object animation (hover over) */
@keyframes hoverover {
   0% { transform: scale(1); border-width:3px;}
   50% { transform: scale(1.1); border-width:4;}
   75% { transform: scale(0.95); border-width:2px;}
   100% { transform: scale(1); border-width:3px;}
}
/* object animation (hover out) */
@keyframes hoverout {
   0% { transform: scale(1); border-width:3px;}
   30% { transform: scale(0.93); border-width:2px;}
   50% { transform: scale(0.93); border-width:2px;}
   80% { transform: scale(1); border-width:3px;}
   100% { transform: scale(1);border-width:3px; }
}
/* child animation (hover over) */
@keyframes moveup {
   0% { transform: translateY(0px); }
   100% { transform: translateY(-20px); }
}
/* child animation (hover out) */
@keyframes movedown {
   0% { transform: translateY(-20px); }
   70% { transform: translateY(5px); }
   100% { transform: translateY(0px); }
}

View Demo

via InWebSon - by