БЛОГ НА HUSL


SVG / Как синхронизировать анимацию. Как убрать дерганье в анимации?

Автор вопроса: BlackStar1991

Есть необходимость в реализации анимации летающего конверта. Вот пример:

var form = document.querySelector(".popup_leadForm");
var elem = document.querySelector(".popup_leadForm__animation");

form.addEventListener("click", function() {
  elem.classList.toggle("error_form");
});
.popup_leadForm {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 392px;
  height: 355px;
  background: rgba(7, 7, 10, .92);
  box-sizing: border-box;
  border: 1px solid #00e676;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  text-align: center;
  z-index: 5
}

button.btn_close__leadForm {
  left: initial;
  bottom: initial;
  top: 0;
  right: 0;
  background: 0 0
}

.popup_leadForm,
.popup_leadForm__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

.popup_leadForm__animation {
  position: relative;
  width: 120px;
  height: 140px
}

.popup_leadForm__animationLetter {
  position: relative;
  margin-top: 12px;
  width: 120px;
  height: 80px;
  will-change: transform;
  transform: translateY(0);
  -webkit-animation: 1000ms animateBoxWithLetter infinite alternate;
  animation: 1000ms animateBoxWithLetter infinite alternate
}

.popup_leadForm__animation.error_form .popup_leadForm__animationLetter {
  margin-top: 40px;
  -webkit-animation: 1000ms animateBoxWithLetterError;
  animation: 1000ms animateBoxWithLetterError;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.popup_leadForm__letter {
  position: relative;
  top: 30px;
  width: 56px;
  height: 43px
}

.popup_leadForm__letter path {
  fill: #00e676
}

.popup_leadForm__animation.error_form .popup_leadForm__letter path,
.popup_leadForm__animation.error_form .popup_leadForm__wing-lines rect {
  fill: #9a1515
}

.popup_leadForm__wing-lines rect {
  fill: #00e676
}

.popup_leadForm__wing {
  position: absolute
}

.popup_leadForm__wing path {
  fill: #fff
}

.wing-svg_animate {
  position: absolute;
  width: 29px;
  height: 21px;
  top: 35px
}

.popup_leadForm__animation.error_form .wing-svg_animate {
  animation: none
}

.wing-svg__left,
.wing-svg__right {
  animation: 200ms moveWing 100ms infinite alternate
}

.wing-svg__left {
  left: -1px;
  transform-origin: 100% 100%
}

.wing-svg__right {
  right: -1px;
  transform-origin: 0 100%
}

.popup_leadForm__animation.error_form .wing-lines-svg_1,
.popup_leadForm__animation.error_form .wing-lines-svg_2 {
  display: none
}

.popup_leadForm__animation.error_form .wing-lines-svg_3 {
  display: block;
}

.wing-lines-svg_animate {
  position: absolute;
  width: 13px;
  height: 14px;
  top: 62px;
  opacity: 0;
  -webkit-animation: 220ms wingLinesAnimation 100ms infinite;
  animation: 220ms wingLinesAnimation 100ms infinite
}

.wing-lines-svg_1 {
  left: 10px
}

.wing-lines-svg_2 {
  right: 10px
}

.wing-lines-svg_3 {
  top: 10px;
  left: 52px;
  display: none;
}

@-webkit-keyframes animateBoxWithLetter {
  0% {
    transform: translateY(-5px)
  }
  to {
    transform: translateY(5px)
  }
}

@keyframes animateBoxWithLetter {
  0% {
    transform: translateY(-5px)
  }
  to {
    transform: translateY(5px)
  }
}

@-webkit-keyframes animateBoxWithLetterError {
  0%,
  20%,
  53%,
  80%,
  to {
    transform: translate3d(0, 0, 0)
  }
  40%,
  43% {
    transform: translate3d(0, -30px, 0)
  }
  70% {
    transform: translate3d(0, -15px, 0)
  }
  90% {
    transform: translate3d(0, -4px, 0)
  }
}

@keyframes animateBoxWithLetterError {
  0%,
  20%,
  53%,
  80%,
  to {
    transform: translate3d(0, 0, 0)
  }
  40%,
  43% {
    transform: translate3d(0, -30px, 0)
  }
  70% {
    transform: translate3d(0, -15px, 0)
  }
  90% {
    transform: translate3d(0, -4px, 0)
  }
}

@-webkit-keyframes moveWing {
  0% {
    transform: rotate(-15deg)
  }
  to {
    transform: rotate(15deg)
  }
}

@keyframes moveWing {
  0% {
    transform: rotate(-15deg)
  }
  to {
    transform: rotate(15deg)
  }
}

@-webkit-keyframes moveWingRight {
  0% {
    transform: rotate(-10deg)
  }
  to {
    transform: rotate(10deg)
  }
}

@keyframes moveWingRight {
  0% {
    transform: rotate(-10deg)
  }
  to {
    transform: rotate(10deg)
  }
}

@-webkit-keyframes wingLinesAnimation {
  0% {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes wingLinesAnimation {
  0% {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
<div class="popup_leadForm">
  <div class="popup_leadForm__animation ">

    <div class="popup_leadForm__animationLetter">
      <svg class="popup_leadForm__letter" width="56" height="43" viewBox="0 0 56 43" xmlns="http://www.w3.org/2000/svg">
                                <path d="M1.736 4.159c7.477 6.39 20.598 17.631 24.454 21.136.517.473 1.073.714 1.65.714.574 0 1.129-.239 1.645-.71 3.86-3.508 16.98-14.75 24.458-21.14a1.152 1.152 0 00.16-1.58C53.23 1.456 51.931.812 50.54.812H5.139c-1.392 0-2.692.644-3.563 1.765a1.152 1.152 0 00.16 1.58zM54.421 7.621a1.122 1.122 0 00-1.21.166 3263.485 3263.485 0 00-16.215 13.946 1.149 1.149 0 00.03 1.761c4.522 3.654 11.336 8.68 16.256 12.253a1.124 1.124 0 001.18.09c.38-.196.618-.59.618-1.02V8.66c0-.446-.258-.852-.659-1.039zM2.397 35.747c4.92-3.572 11.736-8.599 16.256-12.253a1.149 1.149 0 00.031-1.762A3282.413 3282.413 0 002.467 7.788a1.128 1.128 0 00-1.21-.166A1.145 1.145 0 00.6 8.661v26.157c0 .43.238.823.617 1.019a1.123 1.123 0 001.18-.09z"/>
                                <path d="M53.689 38.863c-4.752-3.43-13.505-9.825-18.73-14.104a1.13 1.13 0 00-1.461.025A240.498 240.498 0 0031.006 27c-1.869 1.702-4.463 1.702-6.336-.002a197.014 197.014 0 00-2.49-2.214 1.123 1.123 0 00-1.46-.026C15.514 29.023 6.75 35.426 1.99 38.863a1.151 1.151 0 00-.17 1.711 4.53 4.53 0 003.319 1.47h45.4c1.25 0 2.46-.536 3.32-1.47a1.153 1.153 0 00-.17-1.71z" />
                            </svg>

      <svg class="wing-svg_animate wing-svg__left" viewBox="0 0 29 21" xmlns="http://www.w3.org/2000/svg"><path d="M.337 7.924a1.187 1.187 0 00-.007 1.65 4.867 4.867 0 006.99.007l-1.38 1.41a1.187 1.187 0 00-.007 1.65 4.867 4.867 0 006.99.007l-1.38 1.41a1.187 1.187 0 00-.007 1.65 4.867 4.867 0 006.99.007l-1.38 1.41a1.187 1.187 0 00-.008 1.65 4.867 4.867 0 006.99.007l2.75-2.805c1.793-1.831 1.793-4.8 0-6.63L21.57 3.93a12.07 12.07 0 00-17.32 0L.338 7.924z" fill="#fff"/></svg>
      <svg class="wing-svg_animate wing-svg__right" viewBox="0 0 29 21" xmlns="http://www.w3.org/2000/svg"><path d="M27.885 7.924c.445.454.452 1.194.007 1.65a4.867 4.867 0 01-6.99.007l1.38 1.41c.445.454.452 1.194.007 1.65a4.867 4.867 0 01-6.99.007l1.38 1.41c.446.454.452 1.194.008 1.65a4.867 4.867 0 01-6.991.007l1.38 1.41c.446.454.452 1.194.008 1.65a4.867 4.867 0 01-6.99.007l-2.749-2.805c-1.793-1.831-1.793-4.8 0-6.63L6.652 3.93a12.07 12.07 0 0117.32 0l3.913 3.995z" fill="#fff"/></svg>

      <svg class="popup_leadForm__wing-lines" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <symbol id="wing-lines-svg">
                                    <rect x="5.72" y="13.24" width="8.84" height="1.56" rx=".78" transform="rotate(-90 5.72 13.24)"/>
                                    <rect x="11.44" y="9.6" width="8.84" height="1.56" rx=".78" transform="rotate(-90 11.44 9.6)"/>
                                    <rect y="9.6" width="8.84" height="1.56" rx=".78" transform="rotate(-90 0 9.6)" />
                                </symbol>
                            </svg>

      <svg class="wing-lines-svg_animate wing-lines-svg_1" viewBox="0 0 13 14" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#wing-lines-svg"/></svg>
      <svg class="wing-lines-svg_animate wing-lines-svg_2" viewBox="0 0 13 14" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#wing-lines-svg"/></svg>
      <svg class="wing-lines-svg_animate wing-lines-svg_3" viewBox="0 0 13 14" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#wing-lines-svg"/></svg>
    </div>
  </div>

</div>

Подскажите, пожалуйста как сделать так что б анимация смотрелась хорошо ? Сейчас оно дёргаеться, что припадочное, и крылья двигаются в рассинхроне (Хотя я не могу понять почему. Точки отсчета вроде поставлены верно.)


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.