Вопросы Теги

CSS-переходы 'spazing' некоторые элементы случайным образом в Firefox

Вот пример коллекции "join" * Актеры и фильмы:

https://github.com/mongodb/cookbook/blob/master/ content / patterns / pivot.txt

Использует метод .mapReduce()

* join - альтернативу объединению в документарно-ориентированных базах данных

2
задан Ferdam 17 January 2019 в 22:49
поделиться

1 ответ

Нет необходимости в JavaScript; просто используйте CSS анимации . Я только сделал зеленый для вас: 

#ArcsLogo {
  height: 550px;
}

#logoSec {
  background-color: #fefefe;
}

.greenarc {
  fill: #00ff00;
  transform-origin: 50% 50%;
  transform: rotate(70deg);
  animation: myRotate 4200ms alternate infinite ease-in-out;
}

.graycircle {
  fill: #5d5d5d;
  transform-origin: 50% 50%;
}

.redarc {
  fill: #ff0000;
  transform-origin: 50% 50%;
}

@keyframes myRotate {
  0% {
    transform: rotate(70deg);
  }
  100% {
    transform: rotate(-70deg);
  }
}
<div id="logoSec">
  <svg class="arcs" version="1.1" id="ArcsLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-12 30 383.4 407.5" style="enable-background:new 0 0 383.4 407.5;" xml:space="preserve">
        <path id="GreenArc" class="greenarc" d="M201.1,62.7c-3.2,0-6.3,0.1-9.4,0.3c77.7,5.5,136.2,72.9,130.7,150.6
                c-4.9,70-60.7,125.8-130.7,130.7c3.1,0.2,6.3,0.4,9.4,0.4c77.9,0,141-63.1,141-141S279,62.7,201.1,62.7L201.1,62.7z" />
        <circle id="GrayCircle" class="graycircle" cx="191.7" cy="203.7" r="21.2" />
        <path id="RedArc" class="redarc" d="M60.2,203.7c0-84.6,65.9-154.6,150.4-159.6c-3.1-0.2-6.3-0.3-9.5-0.3
                C112.8,43.2,40.7,114.2,40,202.5c-0.7,88.3,70.3,160.4,158.6,161.1c0.8,0,1.7,0,2.5,0c3.2,0,6.3-0.1,9.5-0.3
                C126.2,358.3,60.2,288.3,60.2,203.7z" />
    </svg>


</div>

Они ключ, чтобы определить keyframes, который Я только что скопировал из transform объявлений, которые вы делали в javascript. Затем, добавив правило animation к классу greenarc, мы сообщаем ему

  • использовать ключевые кадры myRotate (измените имя на любое другое)
  • take 4200ms перейти от 0% к 100%. Я удвоил это, потому что я думаю, что вашей логике потребовалось 2100ms, чтобы перейти от rotate(0) к rotate(70).
  • alternate направление анимации, так что она движется взад-вперёд, а не движется в одном направлении, а затем возвращается туда, где она началась.
  • повторите анимацию infinite [ly]
  • используйте ease-in-out, как вы делали в javascript, чтобы замедлить движение по мере приближения к концам.

См. Анимационную документацию для получения дополнительной информации и примеров.

0
ответ дан nvioli 17 January 2019 в 22:49
поделиться
Другие вопросы по тегам:

Похожие вопросы: