Look Inside
Recently my friend had sent me a flash showcase with nifty hover animations inside. It using different hover over animation and hover out animation on it, which mean the hover out animation is not a reverse version of hover over animation. After seeing the showcase, the first thing come to my mind was, does this can be done in CSS3 also? In today’s tutorial I will show you how to create a nifty hover effects with two different hover over animation and hover out animation using CSS3 animations properties, and NO JavaScript needed.
The Idea
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.
[browser type=”cfs-x”]This working demo only works in browsers that support the respective CSS properties.[/browser]
The 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>
The 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); } }
That’s all for Nifty Hover Effect with CSS3 Animations tutorial.Thanks for reading =)
You might interest in my other CSS3 animations tutorials as well: