Demó:

HTML kód:

<img class="swing" src="KÉPED URL CÍME" /> 

 

<img class="swing" src="KÉPED URL CÍME" style="

animation-delay: 0.8s;

-webkit-animation-delay: 0.8s;

-moz-animation-delay: 0.8s;

animation-delay: 0.8s;

"

/> 

CSS kód:

<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); } 

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); }

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); } 

100% { transform: rotate(0); }

}

 

</style>