Hello everyone, hope you all are doing well. I think after some bunch of HTML CSS animation snippets, I hope you know we transform the animation on our way. On today’s time, CSS animations are very needful for because of the speed of the site. On somewhere images and other animation tools gives us animated GIF on large sizes.
For the above reason suitable is we use CSS animation. Today we learn about how we can transform an image of GIF on the circle and how this is possible.
And see below for a live view
So let’s start with our HTML code where we place the images which we use on the animation and set with the design.
ManWalking.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>Man Walking</title> <link rel="stylesheet" type="text/css" href="manwalking.css"> </head> <body> <div class="circle"> <img src="globe.png"> <div class="man"> <img src="walking.gif"> </div> </div> </body> </html> |
On the above HTML file, we link the CSS file using the link tag and after that set the image on DIV. We animate the Globe image on circle and Man Walking GIF on the Globe. For this, we write some CSS code, where we animate these images and GIF. See below,
manwalking.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
body{ margin: 0; padding: 0; overflow: hidden; animation: day2night 15s linear infinite; } .circle{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 720px; height: 720px; animation: animate 25s linear infinite; } .man{ width: 50%; height: 2px; background: transparent; position: absolute; top:calc(50% - 1px); transform-origin: right; animation: animateMan 10s linear infinite; } .man img{ transform: rotate(60deg) translateY(15px); } @keyframes animate{ 0%{ transform: translate(-50%,-50%) rotate(0deg); } 100%{ transform: translate(-50%,-50%) rotate(-360deg); } } @keyframes animateMan{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } } @keyframes day2night{ 0%{ background: #fff; } 10%{ background: #fff; } 50%{ background: #00523f; } 90%{ background: #fff; } 100%{ background: #fff; } } |
On the above CSS, I explain all the code on below step by step, how you adjust the image on the screen and how to fix the image size and position.
|
1 2 3 4 5 6 7 8 9 |
.circle{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 720px; height: 720px; animation: animate 25s linear infinite; } |
On the above code snippet, .circle class which is set on the main DIV where both images are placed. On that code we use
|
1 2 3 4 |
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); |
for centered the whole div and inner content.
And after that, all below keyframes are use for walk animate the man on that circle.
|
1 2 3 4 5 6 7 8 9 10 |
.man img{ transform: rotate(60deg) translateY(15px); } @keyframes animate{ 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(-360deg); } } |
That’s all if you have anything you want from me or from this blog you can comment below and if you like this and want to more like this animation please go our HTML CSS part.
See the Pen
Man Walking on Earth using CSS HTML by Bikash Panda (@phpcodertech)
on CodePen.
https://static.codepen.io/assets/embed/ei.js