Превосходная анимация CSS

Мне нужно было реализовать бесконечный эффект отскока, используя чистый CSS, поэтому я назвал этот сайт и закончил работу this.

.animated {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
} 

@-webkit-keyframes bounce {
  0%, 20%, 40%, 60%, 80%, 100% {-webkit-transform: translateY(0);}
  50% {-webkit-transform: translateY(-5px);}
} 

@keyframes bounce { 
  0%, 20%, 40%, 60%, 80%, 100% {transform: translateY(0);}
  50% {transform: translateY(-5px);}
} 

.bounce { 
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

#animated-example {
    width: 20px;
    height: 20px;
    background-color: red;
    position: relative;
    top: 100px;
    left: 100px;
    border-radius: 50%;
}

hr {
    position: relative;
    top: 92px;
    left: -300px;
    width: 200px;
}
<div id="animated-example" class="animated bounce"></div>
<hr>

ОТВЕТЫ

Ответ 1

Длительный промежуток между ними связан с настройками вашего ключевого кадра. Ваши текущие правила ключевого кадра означают, что фактический отскок происходит только от 40% до 60% от продолжительности анимации (то есть между отметкой 1 с - 1,5 с анимации). Удалите эти правила и, возможно, даже уменьшите animation-duration в соответствии с вашими потребностями.

.animated {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}
#animated-example {
  width: 20px;
  height: 20px;
  background-color: red;
  position: relative;
  top: 100px;
  left: 100px;
  border-radius: 50%;
}
hr {
  position: relative;
  top: 92px;
  left: -300px;
  width: 200px;
}
<div id="animated-example" class="animated bounce"></div>
<hr>

Ответ 2

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

  • 0% translate 0px
  • 20% translate 0px
  • и др.

Как работает этот пример:

  • Установим animation. Это короткая рука для свойств анимации.
  • Мы сразу запускаем анимацию, так как мы используем from и to в ключевых кадрах. от is = 0% и до = 100%
  • Теперь мы можем контролировать, как быстро он будет отскакивать, установив время анимации: animation: bounce 1s infinite alternate; 1s - как долго будет длиться анимация.

.ball {
  margin-top: 50px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: cornflowerblue;
  border: 2px solid #999;
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}
@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
<div class="ball"></div>

Ответ 3

Если вы уже используете свойство transform для позиционирования вашего элемента (как я в настоящее время), вы также можете анимировать верхнее поле:

.ball {
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from {
    margin-top: 0;
  }
  to {
    margin-top: -15px;
  }
}