WebSoftPrograms: Simple Css3 Animation

Hello! Today I am sharing with you a simple Css3 Animation program, which have apply Css3 Shake effect on some images.

Preview Image

Directions :

Step 1: Add the following code to the <body> section of your Html page :

<div id="wrapper">
<h1>
Image Shake Effect - Css3 Animation</h1>
<div id="main">
<div class="thumb">
<img src="" /><!--Your Image Must Be 250px X 150px.--></div>
<div class="thumb">
<img src="" /><!--Your Image Must Be 250px X 150px.--></div>
<div class="thumb">
<img src="" /><!--Your Image Must Be 250px X 150px.--></div>
<div class="thumb">
<img src="" /><!--Your Image Must Be 250px X 150px.--></div>
<div class="clear">
</div>
</div>
</div>

Step 2: Add the following code to the <style> section of your Html page or Css :

*{
 padding:0px;
   margin:0px;
   font-family:Arial, Helvetica, sans-serif;
}
h1{
 font-family:Calibri;
 color:#333;
 text-align:center;
 margin:25px auto;
}
body{
 margin: 0px;
 padding: 0px;
 background-color: #ccc;
}

.clear{
 clear:both;
}

#wrapper{
 width:1100px;
 height:auto;
 margin:0 auto;
 padding:0 auto;
}
#main{
 width:100%;
 height:auto;
 margin:0 auto;
 padding:0 auto;
}
.thumb{
 float:left;
 width:250px;
 height:150px;
 margin:10px;
}
.thumb img{
 width:100%;
 height:100%;
 border:5px solid #fff;
}

.thumb img:hover
{
 animation-name: shake;
 animation-duration: 200ms;
 transform-origin:50% 50%;
 animation-iteration-count: 2;
 animation-timing-function: linear;
 
 -webkit-animation-name: shake;
 -webkit-animation-duration: 200ms;
 -webkit-transform-origin:50% 50%;
 -webkit-animation-iteration-count: 2;
 -webkit-animation-timing-function: linear;
 
 -moz-animation-name: shake;
 -moz-animation-duration: 200ms;
 -moz-transform-origin:50% 50%;
 -moz-animation-iteration-count: 2;
 -moz-animation-timing-function: linear;
 
 -o-animation-name: shake;
 -o-animation-duration: 200ms;
 -o-transform-origin:50% 50%;
 -o-animation-iteration-count: 2;
 -o-animation-timing-function: linear;
 
 -ms-animation-name: shake;
 -ms-animation-duration: 200ms;
 -ms-transform-origin:50% 50%;
 -ms-animation-iteration-count: 2;
 -ms-animation-timing-function: linear;
}

@keyframes shake {
 0% {transform: scale(1); }
 50% {transform: scale(0.9); }
 100% {transform: scale(1); }
}

@-webkit-keyframes shake {
 0% {-webkit-transform: scale(1); }
 50% {-webkit-transform: scale(0.9); }
 100% {-webkit-transform: scale(1); }
}

@-moz-keyframes shake {
 0% {-moz-transform: scale(1); }
 50% {-moz-transform: scale(0.9); }
 100% {-moz-transform: scale(1); }
}

@-o-keyframes shake {
 0% {-o-transform: scale(1); }
 50% {-o-transform: scale(0.9); }
 100% {-o-transform: scale(1); }
}

@-ms-keyframes shake {
 0% {-ms-transform: scale(1); }
 50% {-ms-transform: scale(0.9); }
 100% {-ms-transform: scale(1); }
}

DOWNLOAD PROJECT SOURCE

Simple Css3 Animation - Image SHAKE Effect

No comments:

Post a Comment