CSS3 Animation Sample

css3_scaling_animation.css

.ani-scaling:hover {
    -webkit-animation: scaling.5 s 1;
    -moz-animation: scaling.5 s 1;
    -ms-animation: scaling.5 s 1;
    animation: scaling.5 s 1;
}

@keyframes scaling {
    from, to {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    25 % {
        -webkit-transform: scale(0.95, 1.1);
        transform: scale(0.95, 1.1);
    }

    50 % {
        -webkit-transform: scale(1.05, 0.9);
        transform: scale(1.05, 0.9);
    }

    75 % {
        -webkit-transform: scale(0.95, 1.05);
        transform: scale(0.95, 1.05);
    }
}

/* Chrome */
@-webkit-keyframes scaling {
    from, to {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    25 % {
        -webkit-transform: scale(0.95, 1.1);
        transform: scale(0.95, 1.1);
    }

    50 % {
        -webkit-transform: scale(1.05, 0.9);
        transform: scale(1.05, 0.9);
    }

    75 % {
        -webkit-transform: scale(0.95, 1.05);
        transform: scale(0.95, 1.05);
        }
}

/* Firefox */
@-moz-keyframes scaling {
    from, to {
        -moz-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    25 % {
        -moz-transform: scale(0.95, 1.1);
        transform: scale(0.95, 1.1);
    }

    50 % {
        -moz-transform: scale(1.05, 0.9);
        transform: scale(1.05, 0.9);
    }

    75 % {
        -moz-transform: scale(0.95, 1.05);
        transform: scale(0.95, 1.05);
    }
}

/* IE */
@-ms-keyframes scaling {
    from, to {
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    25 % {
        -ms-transform: scale(0.95, 1.1);
        transform: scale(0.95, 1.1);
    }

    50 % {
        -ms-transform: scale(1.05, 0.9);
        transform: scale(1.05, 0.9);
    }

    75 % {
        -ms-transform: scale(0.95, 1.05);
        transform: scale(0.95, 1.05);
    }
}