Add CSS3 Swing effect on Images of Blogger blog
Live demo-
Codes for copy-
Part 1: CSS
/*crawlist.net css starts*/
.ks-swing:hover{
-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); }
}
/*crawlist.net css ends*/
Part 2: HTML
<img class="ks-swing" src="Image Link"/>
How to add this effect on Blogger
Step 1:
- Log in to your Blogger, select your blog
- Go to ‘template’ tab
- Select ‘Edit HTML’
- Find into codes snippet (Using Ctrl+f or Cmd+f) ]]><
- Above ]]>< copy and paste Part 1’s codes
- Save template
Step 2:
- While you writing a post, After upload and insert complete for a image, Select ‘HTML’ view from (compost/html) upper side of post editor.
- You will see your uploaded images source code, Place
class="ks-swing"
in the <img tag. See the picture for more info about how to do it.
in the <img tag. See the picture for more info about how to do it.
- After placing the Class, back to ‘compose’ view
Your image swinging is done,
How to use this effect on web project
How to use this effect on web project
- Copy and paste the CSS part into your web project’s stylesheet.css
- And call your image with part 2’s HTML part where you want to show this effect
So what you think about this CSS3 tutorial for Blogger, don’t forget to mention. New tutorial will be release soon, stay connected. Chill…
