10 cool Transitions and Animation effects using CSS3 that attracts your users! [No Javascript]

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.

.box {
margin: 0px 250px;
width: 483px;
height: 298px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 3.4em;
text-align: center;
line-height: 298px;
transition: all 0.3s;
}

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).

.fadein {
opacity : 0.5;
}
.fadein:hover {
opacity : 1;
cursor:pointer;
}

<div class="box fadein">Fade In</div>

2. Fade Out

.fadeout {
opacity : 0.5;
}
.fadeout:hover {
opacity : 1;
cursor:pointer;
}

<div class="box fadeout">Fade Out</div>

3. Zoom In

You may have noticed these days many e-commerce sites use this feature to show the products clearly.

.zoomin:hover
{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor:pointer;
}

<div class="box zoomin">Zoom In</div>

4. Zoom Out

Zoom Out is as simple as Zoom In. To zoom in we specify a value greater than 1, and to zoom out, we specify a value less than 1

.zoomout:hover
{
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
cursor:pointer;
}

<div class="box zoomout">Zoom Out</div>

5. Change Background Color

.change-color:hover {
background:#f7a01a;
color:#000;
cursor:pointer;
}

<div class="box change-color">Change Color</div>

6. Border

These days many websites attract with the high quality images. You can even beautify more with animating borders on hover with those images.

.borderin:hover {
box-shadow: inset 0 0 0 20px #676470;
color:#000;
background-color:#fff;
cursor:pointer;
}

<div class="box borderin">Border</div>

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.

.shadow:hover {
box-shadow: 10px 9px 6px #676470;
background-color: #000;
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
cursor:pointer;
}

<div class="box shadow">Shadow</div>

9. Swing

For swing we need to use @keyframes, animation and animation-iteration.

.swing:hover {
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
cursor:pointer;
}
@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(7px);
        transform: translateX(7px);
    }
    30%
    {
        -webkit-transform: translateX(-7px);
       transform: translateX(-7px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(7px);
        transform: translateX(7px);
    }
    30%
    {
        -webkit-transform: translateX(-7px);
        transform: translateX(-7px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

<div class="box swing">Swing</div>

10. Rotate

You can rotate an element using CSS3 transforms. You also have the option of controlling the rotation based on degree of angle.

.rotate:hover {
-webkit-transform: rotateZ(-360deg);
-ms-transform: rotateZ(-360deg);
transform: rotateZ(-360deg);
transition:all 1.5s ease;
}

<div class="box rotate">Rotate</div>

[sc:demobuttons demolink=”http://demo.techglimpse.com/cool-css3-transitions/” boxlink=”https://app.box.com/s/sxcgnjyzms4ffcpky24g”]