Make Flash & Zooming Image Effect Use CSS3

by Beben Koben

HTML

<h1>Tutorial Blog for Stylish Blogger</h1>
<div id='container'>
                <div class='image-outer left'>
                    <div class='ex1 background' id='ex1-1'></div>    
                    <div class='ex1 background' id='ex1-2'></div>    
                    <div class='ex1 background' id='ex1-3'></div>    
                    <div class='ex1 background' id='ex1-4'></div>    
                    <div class='ex1 background' id='ex1-5'></div>    
                    <div class='ex1 background' id='ex1-6'></div>    
                    <div class='ex1 background' id='ex1-7'></div>    
                    <div class='ex1 background' id='ex1-8'></div>    
                    <div class='ex1 background' id='ex1-9'></div>    
                    <div class='ex1 background' id='ex1-10'></div>    
                    <div class='ex1 background' id='ex1-11'></div>    
                    <div class='ex1 background' id='ex1-12'></div>    
                    <div class='ex1 background' id='ex1-13'></div>    
                    <div class='ex1 background' id='ex1-14'></div>    
                    <div class='ex1 background' id='ex1-15'></div>
                </div>
                <div class='image-outer right'>
                    <div class='ex4 background' id='ex4-1'></div>    
                    <div class='ex4 background' id='ex4-2'></div>    
                    <div class='ex4 background' id='ex4-3'></div>    
                    <div class='ex4 background' id='ex4-4'></div>    
                    <div class='ex4 background' id='ex4-5'></div>    
                    <div class='ex4 background' id='ex4-6'></div>    
                    <div class='ex4 background' id='ex4-7'></div>    
                    <div class='ex4 background' id='ex4-8'></div>    
                    <div class='ex4 background' id='ex4-9'></div>    
                    <div class='ex4 background' id='ex4-10'></div>    
                    <div class='ex4 background'...

CSS

*
{margin:0;padding:0;}
body
{background:#debe94;color:#000;font:15px Calibri, Arial, sans-serif;text-shadow:1px 1px 1px #FFFFFF;padding:10px;}
#container{
    width:75%;
    min-height:590px;
    background-color:#000;
    border-radius: 15px;
    border: 3px solid #ddd;
    box-shadow: 0 0 5px #000;
    margin: 15px auto;
}
.image-outer{
    height:225px;
    width:400px;
    margin-bottom:5px;
    margin-top:40px;
    overflow:hidden;
-webkit-box-shadow: inset 0 0 5px #fff;
-moz-box-shadow: inset 0 0 5px #fff;
box-shadow: inset 0 0 5px #fff;     
    padding:4px;
    background: #333;
}
.right{
    float:right;
    margin-right:40px;
}
.left{
    float:left;
    margin-left:40px;
}
.background{
    background-image:url('http://3.bp.blogspot.com/-h9oCibLeX2M/UD8S6eu-t6I/AAAAAAAAATA/M4tAtXSn9LQ/s400/daun.jpg');
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-duration: 8s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
}

/**************** Example 1 *******************************/

.ex1{
    -webkit-animation-name: animation1;
    -moz-animation-name: animation1;
    width:100%;
    height:15px;
}
@-webkit-keyframes animation1 {
    0%    { width:0;opacity:0;margin-left:200px;-webkit-transform: rotateZ(30deg);}
    10%   {  width:400px;opacity:1;margin-left:0px; -webkit-transform: rotateZ(0deg);}
    65%   { width:400px;opacity:1;margin-left:0px;-webkit-transform: rotateZ(0deg);}
    80%  {  width:0;opacity:0;margin-left:200px;-webkit-transform: rotateZ(30deg);}
    100%  {  width:0;opacity:0;margin-left:200px;-webkit-transform: rotateZ(30deg);}
}
@-moz-keyframes animation1 {
    0%    { width:0;opacity:0;margin-left:200px;-webkit-transform: rotateZ(30deg);}
    10%   {  width:400px;opacity:1;margin-left:0px; -webkit-transform: rotateZ(0deg);}
    65%   {...