On the Internet I found a jumping girl gif:
There was a question - how to implement this animation using CSS or SVG?
It is clear that you need to draw a sprite consisting of individual frames and make them alternately move in a window equal in width to one frame.
640px The width of one frame will be set to 160pxwidth: 160px; and height: 276px;animation: run 0.5s steps(4) infinite; body { background-image:url(https://i.stack.imgur.com/0f4Hg.jpg); background-size:cover; } .girl { animation: run 0.5s steps(4) infinite; -webkit-animation: run 0.5s steps(4) infinite; background: url(https://i.stack.imgur.com/B9kwD.png) 0 100%; background-repeat: no-repeat; position: absolute; bottom:0; right:50%; width: 160px; height: 276px; } @keyframes run { from { background-position: 0px; } to { background-position: -612px; } } .play-audio { position:absolute; bottom:0%; } <div class="girl"></div> <div class="play-audio" style="position:relative"> <audio class="my_audio" controls preload="true" autoplay="autoplay"> <source src="https://svg-art.ru/files/Hsong.mp3" type="audio/mpeg"> </audio> <div> Update 03/18/2019
Chrome has banned the automatic launch of mp3 so added a music player.
Added a background image of the courtyard.
The answer is of course off topic, but there is also animation but on pure css - it looks very impressive
body { background: #fff; height: 100vh; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; font-family: 'Anton', sans-serif; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-perspective: 500px; perspective: 500px; } div { position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .paper_man_wrapper { -webkit-animation: cameraY 7000ms linear infinite; animation: cameraY 7000ms linear infinite; } .paper_man { top: -100px; left: -50px; -webkit-animation: cameraX 5000ms ease-in-out infinite alternate; animation: cameraX 5000ms ease-in-out infinite alternate; } .paper_man .part { background: black; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .paper_man .part::before { content: ''; position: absolute; width: 100%; height: 100%; background: #646464; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .paper_man_body { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotateX(-20deg); transform: rotateX(-20deg); width: 60px; height: 100px; -webkit-animation: shake4 2000ms -100ms ease-in-out infinite; animation: shake4 2000ms -100ms ease-in-out infinite; } .paper_man_head { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; top: -40px; left: calc(50% - 20px); width: 40px; height: 40px; -webkit-transform: rotateX(-10deg); transform: rotateX(-10deg); -webkit-animation: shake4 1000ms -800ms ease-in-out infinite; animation: shake4 1000ms -800ms ease-in-out infinite; } .paper_man_arm.left { -webkit-transform-origin: 0 0; transform-origin: 0 0; right: 0px; -webkit-animation: shake1 1000ms -400ms ease-in-out infinite; animation: shake1 1000ms -400ms ease-in-out infinite; } .paper_man_arm.right { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; left: -20px; -webkit-animation: shake1 1000ms -900ms ease-in-out infinite; animation: shake1 1000ms -900ms ease-in-out infinite; } .paper_man_arm_1 { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; width: 20px; height: 50px; } .paper_man_arm_2 { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; bottom: -50px; width: 20px; height: 50px; } .left .paper_man_arm_2 { -webkit-animation: shake3 1000ms -800ms ease-in-out infinite; animation: shake3 1000ms -800ms ease-in-out infinite; } .right .paper_man_arm_2 { -webkit-animation: shake3 1000ms -300ms ease-in-out infinite; animation: shake3 1000ms -300ms ease-in-out infinite; } .paper_man_arm_hand { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; bottom: -15px; width: 20px; height: 15px; } .left .paper_man_arm_hand { -webkit-animation: shake3 1000ms -200ms ease-in-out infinite; animation: shake3 1000ms -200ms ease-in-out infinite; } .right .paper_man_arm_hand { -webkit-animation: shake3 1000ms -700ms ease-in-out infinite; animation: shake3 1000ms -700ms ease-in-out infinite; } .paper_man_leg { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; top: 100px; } .paper_man_leg.left { right: 30px; -webkit-animation: shake1 1000ms ease-in-out infinite; animation: shake1 1000ms ease-in-out infinite; } .paper_man_leg.right { left: 0; -webkit-animation: shake1 1000ms -500ms ease-in-out infinite; animation: shake1 1000ms -500ms ease-in-out infinite; } .paper_man_leg_1 { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; width: 30px; height: 50px; } .paper_man_leg_2 { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; bottom: -40px; width: 30px; height: 40px; } .left .paper_man_leg_2 { -webkit-animation: shake2 1000ms -600ms ease-in-out infinite; animation: shake2 1000ms -600ms ease-in-out infinite; } .right .paper_man_leg_2 { -webkit-animation: shake2 1000ms -100ms ease-in-out infinite; animation: shake2 1000ms -100ms ease-in-out infinite; } .paper_man_leg_foot { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; bottom: -20px; width: 30px; height: 20px; } .left .paper_man_leg_foot { -webkit-animation: shake3 1000ms -400ms ease-in-out infinite; animation: shake3 1000ms -400ms ease-in-out infinite; } .right .paper_man_leg_foot { -webkit-animation: shake3 1000ms -900ms ease-in-out infinite; animation: shake3 1000ms -900ms ease-in-out infinite; } @-webkit-keyframes shake1 { 0% { -webkit-transform: rotateX(80deg); transform: rotateX(80deg); } 50% { -webkit-transform: rotateX(-80deg); transform: rotateX(-80deg); } 100% { -webkit-transform: rotateX(80deg); transform: rotateX(80deg); } } @keyframes shake1 { 0% { -webkit-transform: rotateX(80deg); transform: rotateX(80deg); } 50% { -webkit-transform: rotateX(-80deg); transform: rotateX(-80deg); } 100% { -webkit-transform: rotateX(80deg); transform: rotateX(80deg); } } @-webkit-keyframes shake2 { 0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(-100deg); transform: rotateX(-100deg); } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } } @keyframes shake2 { 0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(-100deg); transform: rotateX(-100deg); } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } } @-webkit-keyframes shake3 { 0% { -webkit-transform: rotateX(10deg); transform: rotateX(10deg); } 50% { -webkit-transform: rotateX(120deg); transform: rotateX(120deg); } 100% { -webkit-transform: rotateX(10deg); transform: rotateX(10deg); } } @keyframes shake3 { 0% { -webkit-transform: rotateX(10deg); transform: rotateX(10deg); } 50% { -webkit-transform: rotateX(120deg); transform: rotateX(120deg); } 100% { -webkit-transform: rotateX(10deg); transform: rotateX(10deg); } } @-webkit-keyframes shake4 { 0% { -webkit-transform: rotateX(-30deg); transform: rotateX(-30deg); } 50% { -webkit-transform: rotateX(-10deg); transform: rotateX(-10deg); } 100% { -webkit-transform: rotateX(-30deg); transform: rotateX(-30deg); } } @keyframes shake4 { 0% { -webkit-transform: rotateX(-30deg); transform: rotateX(-30deg); } 50% { -webkit-transform: rotateX(-10deg); transform: rotateX(-10deg); } 100% { -webkit-transform: rotateX(-30deg); transform: rotateX(-30deg); } } @-webkit-keyframes cameraY { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @keyframes cameraY { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @-webkit-keyframes cameraX { 0% { -webkit-transform: rotateX(-50deg); transform: rotateX(-50deg); } 100% { -webkit-transform: rotateX(50deg); transform: rotateX(50deg); } } @keyframes cameraX { 0% { -webkit-transform: rotateX(-50deg); transform: rotateX(-50deg); } 100% { -webkit-transform: rotateX(50deg); transform: rotateX(50deg); } } <div class="paper_man_wrapper"> <div class="paper_man"> <div class="paper_man_body part"> <div class="paper_man_head part"></div> <div class="paper_man_arm left"> <div class="paper_man_arm_1 part"> <div class="paper_man_arm_2 part"> <div class="paper_man_arm_hand part"></div> </div> </div> </div> <div class="paper_man_arm right"> <div class="paper_man_arm_1 part"> <div class="paper_man_arm_2 part"> <div class="paper_man_arm_hand part"></div> </div> </div> </div> <div class="paper_man_leg left"> <div class="paper_man_leg_1 part"> <div class="paper_man_leg_2 part"> <div class="paper_man_leg_foot part"></div> </div> </div> </div> <div class="paper_man_leg right"> <div class="paper_man_leg_1 part"> <div class="paper_man_leg_2 part"> <div class="paper_man_leg_foot part"></div> </div> </div> </div> </div> </div> </div> Source: Yusuke Nakaya
Source: https://ru.stackoverflow.com/questions/841251/
All Articles