Блог

Главная - Вопросы по программированию - Как установить анимацию с помощью css в html-файле?

Как установить анимацию с помощью css в html-файле?

#html #css

Вопрос:

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

   <div class="footer-btm">
    Thanks for watching
    <div class="loading">
      <span></span>
      <span></span>
      <span></span>
    </div>
    </div>
<style>
.loading span{
  width: 15px;
  height: 15px;
  margin: 0 5px;
  background-color: #ffd957;
  border-radius: 50%;
  display: inline-block;
  animation-name: dots;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.loading span:nth-child(2){
  background-color: #57ffa0;
  animation-delay: 0.4s;

}
.loading span:nth-child(3){
  background-color: #ff8b57;
  animation-delay: 0.8s;
}
@keyframes dots{
  50%{
    opacity: 0;
    transform: scale(0.7) translateY(10px);
  }
}
</style>

я следую этому https://youtu.be/aglMDLGeXnc учебное пособие по разработке этой вещи

Ответ №1:

Вы забыли animation-duration атрибут:

   animation-name: dots;
  animation-duration: 2s;
  animation-iteration-count: infinite;

Добавьте это, и точки будут появляться / исчезать правильно.

Метки: