{"id":13128,"date":"2021-05-08T20:20:34","date_gmt":"2021-05-08T15:20:34","guid":{"rendered":"https:\/\/iadnanahmed.com\/?p=13128"},"modified":"2021-05-08T23:35:17","modified_gmt":"2021-05-08T18:35:17","slug":"running-boy-on-the-road-using-css-animation","status":"publish","type":"post","link":"https:\/\/iadnanahmed.com\/running-boy-on-the-road-using-css-animation\/","title":{"rendered":"Running Boy on the Road Using CSS Animations"},"content":{"rendered":"\n<iframe width=\"560\" height=\"800\" src=\"https:\/\/www.youtube.com\/embed\/AJir-LgXrWA?autoplay=1&#038;loop=1\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; loop; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen loop><\/iframe>\n\n\n\t<div class=\"g-ytsubscribe\" data-channelid=\"UCYiWKFupNc_XWimWE8r8kBw\" data-layout=\"full\" data-theme=\"dark\" data-count=\"default\"><\/div>\n\n\n\n\n<p>CSS Animations allow creating some complex animations on the website without using old fashioned Flash animations.<\/p>\n\n\n\n<p>In this tutorial, I am just using a straightforward animation that shows a boy running on the road. But once you see the code, there is only one simple city background image moving using the CSS3 animation. <\/p>\n\n\n\n<p>And boy runner is a simple gif animation. I will link all these assets in this post.<\/p>\n\n\n\n<p>The HTML code for this CSS animation scene is below. You need to create one HTML file in your working directory\u2014e.g index.html.<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Runing&lt;\/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n        &lt;div class=\"moving-bg\"&gt;\n            &lt;img src=\"runner.gif\" alt=\"\" class=\"runner\"&gt;\n        &lt;\/div&gt;\n       \n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>You can see nothing fancy but a div with class &#8220;moving-bg&#8221; and a gif in an image tag. The gif image is here.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/iadnanahmed.com\/wp-content\/uploads\/2021\/05\/runner.gif\" alt=\"\" class=\"wp-image-13135\"\/><figcaption>Image Credit: h<a href=\"\/\/www.clipartbest.com\/clipart-4c9ogdBgi\" target=\"_blank\" rel=\"noreferrer noopener\" data-lasso-id=\"1110\">ttp:\/\/www.clipartbest.com\/clipart-4c9ogdBgi<\/a><\/figcaption><\/figure>\n\n\n\n<p>Now you need to create one stylesheet file for all the CSS, e.g. style.css. You can even put this CSS in the head section of the HTML file. But I want to keep the code clean.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body{\n    margin:0;\n    padding:0;\n}\n.moving-bg{\n    background: url(bg.jpg) repeat-x #87CEFA;\n    background-position: 0 0;\n    background-size: cover;\n    height: 100vh;\n    margin: 0;\n    padding: 0;\n    position: relative;\n    animation: animateX 15s linear infinite;\n}\n@keyframes animateX{\n    from{\n        background-position: 0 0;\n    }\n    to {\n        background-position: 100% 0;\n    }\n}\n.runner{\n    position: absolute;\n    bottom:0;\n    height: 45%;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" src=\"https:\/\/iadnanahmed.com\/wp-content\/uploads\/2021\/05\/bg-1024x529.jpg\" alt=\"\" class=\"wp-image-13141\" srcset=\"https:\/\/iadnanahmed.com\/wp-content\/uploads\/2021\/05\/bg-1024x529.jpg 1024w, https:\/\/iadnanahmed.com\/wp-content\/uploads\/2021\/05\/bg-300x155.jpg 300w, https:\/\/iadnanahmed.com\/wp-content\/uploads\/2021\/05\/bg-768x397.jpg 768w, https:\/\/iadnanahmed.com\/wp-content\/uploads\/2021\/05\/bg-1536x794.jpg 1536w, https:\/\/iadnanahmed.com\/wp-content\/uploads\/2021\/05\/bg-2048x1058.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Designed by <a href=\"http:\/\/www.freepik.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" data-lasso-id=\"1111\">Freepik<\/a><\/figcaption><\/figure>\n\n\n\n<p>You can see, the stylesheet is not very complex. Most of the CSS rules are very simple.<\/p>\n\n\n\n<p>In the &#8220;.moving-bg&#8221; class rule, I used the background, which will repeat on the x-axis, and the &#8220;background-position&#8221; is 0 0, which is the actual top left on the screen. Also, the background will cover the whole size of the view area, which you can see is 100vh in the height property.<br><br>The main property is animation. It is changing &#8220;background-position&#8221; from 0 to 100% as defined in the @keyframes. You can read more about CSS3 animation at <a href=\"https:\/\/www.w3schools.com\/css\/css3_animations.asp\" target=\"_blank\" rel=\"noreferrer noopener\" data-lasso-id=\"1112\">w3schools<\/a>.<\/p>\n\n\n\n<p>Now see the final output and it is pretty satisfying. <a href=\"https:\/\/youtu.be\/AJir-LgXrWA\" target=\"_blank\" rel=\"noreferrer noopener\" data-lasso-id=\"1113\">https:\/\/youtu.be\/AJir-LgXrWA<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS Animations allow creating some complex animations on the website without using old fashioned Flash animations. In this tutorial, I am just using a straightforward animation that shows a boy running on the road. But once you see the code, there is only one simple city background image moving using the CSS3 animation. And boy [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":13157,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[120,107],"tags":[123,191,162,188,189,190,124,171,125,126],"acf":[],"_links":{"self":[{"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/posts\/13128"}],"collection":[{"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/comments?post=13128"}],"version-history":[{"count":30,"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/posts\/13128\/revisions"}],"predecessor-version":[{"id":13171,"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/posts\/13128\/revisions\/13171"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/media\/13157"}],"wp:attachment":[{"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/media?parent=13128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/categories?post=13128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iadnanahmed.com\/wp-json\/wp\/v2\/tags?post=13128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}