Анимация персонажа прыгающей девочки

474
13 июля 2018, 02:30

На просторах интернета нашел гифку прыгающей девочки:

Возник вопрос,- как реализовать эту анимацию с помощью CSS или SVG?

Понятно, что нужно нарисовать спрайт, состоящий из отдельных кадров и заставить их поочередно перемещаться в окне равным по ширине одному кадру.

Answer 1
  • Рисуем или находим готовый спрайт:

  • Ширина спрайта - 640px Ширина одного кадра будет задана - 160px
  • Спрайт добавляется в качестве фона и будет дискретно, по кадру перемещаться в окне равному по ширине и высоте одному кадру: width: 160px; и height: 276px;
  • команда анимации дискретного перемещения: animation: run 0.5s steps(4) infinite;
  • Осталось подобрать подходящий музыкальный фрагмент: "Boney M - Happy Song"

.girl { 
  animation: run 0.5s steps(4) infinite; 
  -webkit-animation: run 0.5s steps(4) infinite; 
  background: url(https://i.stack.imgur.com/AspXb.png) 0 100%; 
  background-repeat: no-repeat; 
  position: absolute; 
  width: 160px; 
  height: 276px; 
  left: 200px; 
  bottom: 0; 
} 
 
@keyframes run { 
  from { 
    background-position: 0px; 
  } 
  to { 
    background-position: -612px; 
  } 
}
<audio src="https://svg-art.ru/files/Hsong.mp3" autoplay="autoplay"></audio> 
 
<div class="girl"></div>

Answer 2

Ответ разумеется не по теме, но тут так же анимация но на чистом css - очень эффектно выглядит

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>

Источник: Yusuke Nakaya

READ ALSO
Как правильно подключить JQuery плагины в Angular 2?
jQuery

Как правильно подключить JQuery плагины в Angular 2?

Сделал верстку и собрал проект с помощью gulp, все библиотеки и плагины объеденил в 1 файлДалее подключил его и скрипты в

 186
slider cloud tag (Слайдер облако тегов)
jQuery

slider cloud tag (Слайдер облако тегов)

Ищу похожий слайдер может кому-то попадался или знает как его сделать самому

 151
Подмена метода во время RunTime
c#

Подмена метода во время RunTime

Чисто спортивного интереса ради появилась задача: во время RunTime подменить тело одного метода на тело другогоСобственно, задача была успешно,...

 242
Что такое OwinContext ? Asp.Net core 2.0 Identity
c#

Что такое OwinContext ? Asp.Net core 2.0 Identity

пытаюсь создать RoleManager

 182