انجمن کدستانMoisrex

<img class="swing" src="http://moisrex.rozblog.com/user/Avatar/moisrex/moisrex.jpg" style="

animation-delay: 0.8s;

-webkit-animation-delay: 0.8s;

-moz-animation-delay: 0.8s;

animation-delay: 0.8s;

"

/>

<img class="swing" src="http://moisrex.rozblog.com/user/Avatar/moisrex/moisrex.jpg" style="

animation-delay: 0.5s;

-webkit-animation-delay: 0.5s;

-moz-animation-delay: 0.5s;

animation-delay: 0.5s;

"

/>

<style>

.swing{

-webkit-animation:swinging 10s ease-in-out 0s infinite;

-moz-animation:swinging 10s ease-in-out 0s infinite;

animation:swinging 10s ease-in-out 0s infinite;

-webkit-transform-origin:50% 0;

-moz-transform-origin:50% 0;

transform-origin:50% 0;

}

@-webkit-keyframes swinging{

0% { -webkit-transform: rotate(0); }

5% { -webkit-transform: rotate(10deg); }

10% { -webkit-transform: rotate(-9deg); }

15% { -webkit-transform: rotate(8deg); }

20% { -webkit-transform: rotate(-7deg); }

25% { -webkit-transform: rotate(6deg); }

30% { -webkit-transform: rotate(-5deg); }

35% { -webkit-transform: rotate(4deg); }

40% { -webkit-transform: rotate(-3deg); }

45% { -webkit-transform: rotate(2deg); }

50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */

100% { -webkit-transform: rotate(0); }

}

@-moz-keyframes swinging{

0% { -moz-transform: rotate(0); }

5% { -moz-transform: rotate(10deg); }

10% { -moz-transform: rotate(-9deg); }

15% { -moz-transform: rotate(8deg); }

20% { -moz-transform: rotate(-7deg); }

25% { -moz-transform: rotate(6deg); }

30% { -moz-transform: rotate(-5deg); }

35% { -moz-transform: rotate(4deg); }

40% { -moz-transform: rotate(-3deg); }

45% { -moz-transform: rotate(2deg); }

50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */

100% { -moz-transform: rotate(0); }

}

@keyframes swinging{

0% { transform: rotate(0); }

5% { transform: rotate(10deg); }

10% { transform: rotate(-9deg); }

15% { transform: rotate(8deg); }

20% { transform: rotate(-7deg); }

25% { transform: rotate(6deg); }

30% { transform: rotate(-5deg); }

35% { transform: rotate(4deg); }

40% { transform: rotate(-3deg); }

45% { transform: rotate(2deg); }

50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */

100% { transform: rotate(0); }

}