Почему анимация гниль-короны не работает? - PullRequest
Новая
       29

Почему анимация гниль-короны не работает?

0 голосов
/ 26 марта 2020

Я работаю над проектом коронавируса, а анимация Rot-Corona не работает. Я хочу, чтобы он вращался на 360 градусов через каждые 3 секунды, и для заметки bootstrap -4 включен в него

код 

/* SCSS */

#rotate-corona-text {
  h1 {
    font-size: 3rem;
  }
  img {
    width: 100px;
    height: 100px;
  }
  #rotate-corona-text {
    img {
      animation: rot-corona 3s linear infinite;
    }
  }
}
<section id="main-header" class="py-4">
  <div class="container py-4">
    <div class="row border py-4 align-items-center justify-content-between">
      <div class="col-12 col-md-4  order-2 order-lg-1  " id="unity-images">
      </div>
      <div class="col-12 col-md-7 order-1 order-lg-2" id="rotate-corona-text">
        <h1 class="text-primary">lets stay safe and fight against cor<span id="rotate-cororna"><img src="./assets/corona-icon.jpg"  alt=""></span>na </h1>
      </div>
    </div>
  </div>
</section>

и для изображения, которое я хочу повернуть, составляет https://ibb.co/qFSqkyq

1 Ответ

0 голосов
/ 27 марта 2020
  1. S CSS компилируется в это: 
#rotate-corona-text h1 {
  font-size: 3rem;
}

#rotate-corona-text img {
  width: 100px;
  height: 100px;
}

#rotate-corona-text #rotate-corona-text img {
  animation: rot-corona 3s linear infinite;
}

Обратите внимание, что 3-й оператор имеет селектор нескольких идентификаторов, который не выбирает требуемый узел.

Вам не хватает @ ключевых кадров для определения анимации, которую вы объявили для img.

Вывод: 

#rotate-corona-text h1 {
  font-size: 3rem;
}

#rotate-corona-text img {
  width: 100px;
  height: 100px;
}

#rotate-corona-text img {
  animation: rot-corona 6s infinite; /* 6s because 50% is completed at 3s. */
}

@keyframes rot-corona {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(360deg); /* CSS does not offer animation-delay between iterations. This is a hack */
  }
  100% {
    transform: rotate(360deg);
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<section id="main-header" class="py-4">
  <div class="container py-4">
    <div class="row border py-4 align-items-center justify-content-between">
      <div class="col-12 col-md-4  order-2 order-lg-1  " id="unity-images">
      </div>
      <div class="col-12 col-md-7 order-1 order-lg-2" id="rotate-corona-text">
        <h1 class="text-primary">Lets stay safe and fight against Cor<span id="rotate-cororna"><!-- Transparent background for you --><img src="https://i.stack.imgur.com/9Wifk.png"  alt=""></span>na </h1>
      </div>
    </div>
  </div>
</section>
...