February 20, 2015

A beautiful transform effect using CSS3 - Let It Snow

Let it snow

With CSS3, we can add an effect when changing from one style to another, without using Flash or JavaScript. CSS3 transitions are effects that let an element gradually change from one style to another. The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

Here i have created a png background for giving a snow effect. Then another image for the transform effect, a bird moving up and down

HTML

<div class='letitsnow'>
   <a href='https://twitter.com/vivinantony' target='_blank'><img class='balloon' src='http://thelittletechie.byethost33.com/img/techie/ribbon-twitter.png'/></a>
</div>

CSS3

.letitsnow {
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    transition: all 2s ease;
}

.balloon {
    position: absolute;
    -webkit-animation: balloonBobble 7s infinite;
    -moz-animation: balloonBobble 7s infinite;
    animation: balloonBobble 7s infinite;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    transition: all 2s ease;
}

.letitsnow {
    background: url(https://sites.google.com/site/vivinantony/img/other/letitsnow-bg.png) top left/100% 200px repeat-x #fff;
    height: 200px;
    position: relative;
}

.balloon {
    top: 15%;
    left: 3px;
    height: auto;
    width: 95%;
}

@-webkit-keyframes balloonBobble
{
    0%
    {
        -webkit-transform: translateY(-20px);
    }

    50%
    {
        -webkit-transform: translateY(30px);
    }

    100%
    {
        -webkit-transform: translateY(-20px);
    };
}

@-moz-keyframes balloonBobble
{
    0%
    {
        -moz-transform: translateY(-20px);
    }

    50%
    {
        -moz-transform: translateY(30px);
    }

    100%
    {
        -moz-transform: translateY(-20px);
    };
}

@-o-keyframes balloonBobble
{
    0%
    {
        -o-transform: translateY(-20px);
    }

    50%
    {
        -o-transform: translateY(30px);
    }

    100%
    {
        -o-transform: translateY(-20px);
    };
}

@keyframes balloonBobble
{
    0%
    {
        transform: translateY(-20px);
    }

    50%
    {
        transform: translateY(30px);
    }

    100%
    {
        transform: translateY(-20px);
    };
}

demo

No comments:

Post a Comment

Popular Posts

Views