JQuery CSS Animation and Rotate

December 11th, 2011 by aditia rahman / No Comments  

     

In today post I try to do a little experiment with css animation, with jquery to generating css value on the fly. When this post created the this animation examples only works on firefox and chrome browser.

In this short example I try to create a stack of images, on the default position each of images have a different angle, and rotating to the same angle in the same duration of time. Here I show all of the code.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Rotate And Animation</title>
    <script src="jquery-1.6.4.min.js"></script>
    <script>
    $(function() {
        var tot = $(".img_c").length;
        var stat = deg = 10;
        var rotate = "";
        var frame, mozframe, webkitframe;
        $("img").each(function(index) {
            $(this).css({
                "transform": "rotate("+deg+"deg)",
                "-moz-transform": "rotate("+deg+"deg)",
                "-webkit-transform": "rotate("+deg+"deg)",
                "-o-transform": "rotate("+deg+"deg)"
            });

            rotate = "100% {" +
                "transform: rotate(360deg);" +
                "-moz-transform: rotate(360deg);" +
                "-webkit-transform: rotate(360deg);" +
                "-o-transform: rotate(360deg);" +
                "} ";

            var imgclass = parseInt(index+1);
            frame = " @keyframe anim" + imgclass + " { " +
                rotate + "}";
            mozframe = " @-moz-keyframes anim" + imgclass + " { " +
                rotate + "}";
            webkitframe = " @-webkit-keyframes anim" + imgclass + " { " +
                rotate + "}";
            $('<style> '+ frame + mozframe + webkitframe +
                ' .img'+imgclass+' { animation: anim'+imgclass+' 3s ease 0s infinite alternate;' +
                                   '-moz-animation: anim'+imgclass+' 3s ease 0s infinite alternate;' +
                                   '-webkit-animation: anim'+imgclass+' 3s ease 0s infinite alternate; }'
                +'</style>').appendTo('head');

            deg = deg + stat;
        });
    });
    </script>
    <style>
        body {
            background: #fff url('wood_pattern.png') repeat top right;
        }
        .content {
            margin: 0 auto;
            padding: 100px;
        }
        img {
            margin: 10px;
            padding: 20px;
            background: #fff;
            -moz-box-shadow: 0px 0px 3px #d3d3d3;
            -webkit-box-shadow: 0px 0px 3px #d3d3d3;
            box-shadow: 0px 0px 3px #d3d3d3;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="img_c"><img class="img1" src="img/01.jpg"/></div>
        <div class="img_c"><img class="img2" src="img/02.jpg"/></div>
        <div class="img_c"><img class="img3" src="img/03.jpg"/></div>
        <div class="img_c"><img class="img4" src="img/04.jpg"/></div>
        <div class="img_c"><img class="img5" src="img/05.jpg"/></div>
        <div class="img_c"><img class="img6" src="img/06.jpg"/></div>
        <div class="img_c"><img class="img7" src="img/07.jpg"/></div>
        <div class="img_c"><img class="img8" src="img/07.jpg"/></div>
        <div class="img_c"><img class="img9" src="img/09.jpg"/></div>
        <div class="img_c"><img class="img10" src="img/09.jpg"/></div>
    </div>
</body>
</html>

I use jquery for generating each images angle, and adding CSS animation on the fly using jquery, you can see all the images have the same animation keyframe which is animation to 360deg in 3 seconds, with ease effect, so why not just put on static css style, I don’t really know what, but on webkit browser it is not working. Here the demo, this might be a lag on firefox.

Demo

jquery css rotate animation

        submit to reddit Delicious

No Comment Leave a Comment Subscribe RSS

Leave a Comment