CSS-анимация в стиле игровых автоматов: как мне сделать это плавно и остановить после определенного количества времени? - PullRequest
Новая
       10

CSS-анимация в стиле игровых автоматов: как мне сделать это плавно и остановить после определенного количества времени?

0 голосов
/ 27 марта 2019

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

.scrollable {
  height: 150px;
  width: 150px;
  margin: 0 auto;
  padding: 0;
  background: #000;
  overflow: hidden;
}

.items {
  -webkit-animation: scroll 5s infinite;
  -moz-animation: scroll 5s infinite;
  -ms-animation: scroll 5s infinite;
}

.number {
  color: #ffffff;
  font-size: 36px;
  padding-bottom: 28px;
  position: relative;
  top: 20px;
}

@-webkit-keyframes scroll {
  0% {
    margin-top: 0;
  }
  27.33% {
    margin-top: 0;
  }
  33.33% {
    margin-top: -50px;
  }
  60.66% {
    margin-top: -50px;
  }
  66.66% {
    margin-top: -100px;
  }
  94.99% {
    margin-top: -100px;
  }
  100% {
    margin-top: 0;
  }
}

@-moz-keyframes scroll {
  0% {
    margin-top: 0;
  }
  27.33% {
    margin-top: 0;
  }
  33.33% {
    margin-top: -50px;
  }
  60.66% {
    margin-top: -50px;
  }
  66.66% {
    margin-top: -100px;
  }
  94.99% {
    margin-top: -100px;
  }
  100% {
    margin-top: 0;
  }
}

@-ms-keyframes scroll {
  0% {
    margin-top: 0;
  }
  27.33% {
    margin-top: 0;
  }
  33.33% {
    margin-top: -50px;
  }
  60.66% {
    margin-top: -50px;
  }
  66.66% {
    margin-top: -100px;
  }
  94.99% {
    margin-top: -100px;
  }
  100% {
    margin-top: 0;
  }
}
<div class="scrollable">
  <div class="items">
    <div class="number">1</div>
    <div class="number">2</div>
    <div class="number">3</div>
    <div class="number">1</div>
    <div class="number">2</div>
  </div>
</div>

Как я могу сделать так, чтобы он перешел так, чтобы он казался бесконечным циклом, в отличие от возврата к началу, как сейчас?Также, как я могу заставить цикл остановиться через определенное время, скажем, 30 секунд?

1 Ответ

0 голосов
/ 29 марта 2019

Не уверен, поможет ли это, но вы можете сделать бесконечный цикл с content изменением.Кроме того, вы можете остановить его после определенных циклов, используя свойство animation-iteration-count.Я пытался заставить его работать.

См. Фрагмент ниже: 

.scrollable {
  height: 80px;
  width: 150px;
  margin: 0 auto;
  padding: 0;
  background: #000;
  overflow: hidden;
}

.items{
  width: 0;
  word-break: break-all;
  word-wrap:break-word;
  white-space: pre-line;
}

.items::before {
  content:"1 2 3";
  color: #ffffff;
  font-size: 36px;
  -webkit-animation: scroll 5s infinite;
  -moz-animation: scroll 5s infinite;
  -ms-animation: scroll 5s infinite;
  -webkit-animation-iteration-count: 5;
}

@-webkit-keyframes scroll {
  0% {
  content:"1 2 3";
  }
  27.33% {
  content:"1 2 3";
  }
  33.33% {
  content:"2 3 1";
  }
  60.66% {
  content:"2 3 1";
  }
  66.66% {
  content:"3 1 2";
  }
  94.99% {
  content:"3 1 2";
  }
  100% {
  content:"1 2 3";
  }
}
<div class="scrollable">
  <div class="items">
  </div>
</div>
...