Как улучшить анимацию @keyframes и сделать ее более плавной - PullRequest
Новая
       7

Как улучшить анимацию @keyframes и сделать ее более плавной

0 голосов
/ 11 сентября 2018

Я пытаюсь создать анимацию ключевых кадров, которая представляет что-то, что было отправлено, когда значок бумажной плоскости влетает и выходит из круга.

(я использую букву X вместо иконки для более удобного воспроизведения)

У меня он почти работает (см. Ниже) , но обнаружим, что иногда он может нервничать, когда верхняя часть X мигает в верхней части круга. Это особенно заметно, если вы откроете фрагмент кода ниже в полноэкранном режиме.

enter image description here

Кроме того, я бы хотел, чтобы анимация выглядела более плавной: X появляется за пределами круга в течение меньшего времени.

Есть ли способ исправить это или сделать это лучше?

http://jsfiddle.net/hp1new8L/38/

.icon-send {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 100%;
  text-align: center;
  color: white;
  font-size: 60px;
  font-family: sans-serif;
}

.icon-send:before {
    position: relative;
    content: 'x';
    line-height: 100px;
    animation-name: flying-paper-plane;
    animation-duration: 2s;
  }

@keyframes flying-paper-plane {
  0% {
    left: 0;
    top: 0;
  }

  49.9% {
    left: 60px;
    top: -60px;
  }

  50% {
    left: 0;
    top: -60px;
  }

  50.1% {
    left: -60px;
    top: 60px;
  }

  100% {
    left: 0;
    top: 0;
  }
}
<div class="icon-send"></div>

1 Ответ

0 голосов
/ 11 сентября 2018

Если вы сделаете самолет невидимым на 50%, вы не увидите его, когда он прыгнет на другую сторону (и выглядит немного лучше IMO).Для определения времени вы можете использовать cubic-bezier в качестве @ ChintuYadavSara . 

.icon-send {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 100%;
  text-align: center;
  color: white;
  font-size: 60px;
  font-family: sans-serif;
}

.icon-send:before {
    position: relative;
    content: 'x';
    line-height: 100px;
    animation-name: flying-paper-plane;
    animation-duration: 1.5s;
  }

@keyframes flying-paper-plane {
  0% {
    left: 0;
    top: 0;
  }

  49.9% {
    left: 60px;
    top: -60px;
  }
  
  50% {
    left: 0;
    top: 0;
    opacity:0;
  }

  50.1% {
    left: -60px;
    top: 60px;
  }

  100% {
    left: 0;
    top: 0;
  }
}
<div class="icon-send"></div>
...