Sponsored

Not the solution you were looking for?

CSS3 is the latest standard for CSS. CSS3 comes loaded with many new features such as, Text Effects, 2D/3D Transformations, Animations, User Interface, etc., to make life easier for web designers and developers.

With only few of lines of styling with CSS3, a developer can provide awesome effects, which will excite your users and increase conversions ultimately. Also the performance of your website will increase as we will use just CSS and no javascript, flash or heavy images! Excited?

Here are 10 simple transition effects that will boost the page engagements. All the below effects are controlled with the transition property.

Now all we need to do is change properties, and they’ll animate for us…
[sc:demobuttons demolink=”http://demo.techglimpse.com/cool-css3-transitions/” boxlink=”https://app.box.com/s/sxcgnjyzms4ffcpky24g”]

1. Fade In

Fade In/Fade Out is a fairly common property used to draw attention. Fade In/Fade Out effects are brought in two stages;Set the default state; next, set the change on action (eg., On hover).

7. Rounded Corners

Turning a perfect square element to a rounded corner one, or even to a circle/oval has become easy with CSS3 transitions. We can achieve just by adjusting the border-radius property. If you set the border-radius to 50%, you get a circle.

.corners:hover {
border-radius:50px;
}

<div class="box corners">Rounded Corners</div>

8. 3D Shadow

This effect is achieved by adding a box shadow, and then moving the element on the x-axis using the transform and translate properties so that it appears to grow out of the screen.