Любая идея, как я могу добавить задержку на других кругах - PullRequest
Новая
       1

Любая идея, как я могу добавить задержку на других кругах

0 голосов
/ 06 февраля 2020

У меня есть Css анимация с jQuery. Мне удается показать их с интервальной функциональностью. Но я не могу понять, как установить задержки для других элементов, чтобы они не отображались одновременно.

Возможно ли применить это в чистом s css без использования jQuery? 

jQuery(document).ready(function($) {

  var counter = 0;
  var randomInt = 0;

  window.setInterval(function(){
    randomPosition()
  }, 3850);

  randomPosition();

  function randomPosition() {
    $('.animation-circle--item').each( function(){
          randomInt = Math.floor(Math.random() * 500);

          $(this).css({
            left: Math.floor(Math.random() * 100) + 5 + '%',
            top: Math.floor(Math.random() * 100) + 5 + '%',
            width: randomInt,
            height: randomInt
          },0);
    })
  }
});

https://codepen.io/makbbt/pen/zYGYoKz

1 Ответ

0 голосов
/ 06 февраля 2020

Вы можете использовать css задержку анимации, чтобы сделать это без использования jquery! 

<html>
<head>
<style> 
.ele {
  width: 60px;
  height: 60px;
  background-color: red;
  animation: 1s fadeIn;
  animation-fill-mode: forwards;
  border-radius:50px;
  visibility: hidden;
}

.ele:hover {
  background-color: #123;
}
.ele1{animation-delay: 1s;}
.ele2{animation-delay: 4s;}
.ele3{animation-delay: 8s;}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
</style>
</head>
<body>
<div class="ele ele1"></div>
<div class="ele ele2"></div>
<div class="ele ele3"></div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...