Как анимировать элемент списка в последовательности с помощью анимации ключевых кадров css3 - PullRequest
Новая
       11

Как анимировать элемент списка в последовательности с помощью анимации ключевых кадров css3

0 голосов
/ 11 октября 2018

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

HTML 

<ul>
  <li>content 1</li>
  <li>content 2</li>
  <li>content 3</li>
  <li>content 4</li>
</ul>

Стиль 

ul {
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
}

li {
  flex-basis: 50%;
  color: green;
  height: 100px;
  background-color: gray;
  border: 1px solid black;
  box-sizing: border-box;
  animation: fade 1s ease-in-out infinite alternate;
}

li:nth-of(2) {
  animation-delay: 1s;
}
li:nth-of(3) {
  animation-delay: 2s;
}
li:nth-of(4) {
  animation-delay: 3s;
}
@keyframes fade {
  from {
    color: black;
    background-size: 0;
  }
  to {
    background-color: #1b385c;
    color: white;
  }
}

DEMO

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Используйте этот код: 

  <ul>
    <li>content 1</li>
    <li>content 2</li>
    <li>content 3</li>
    <li>content 4</li>
  </ul>

Css 

    ul {
    display: flex;
    list-style-type: none;
    flex-wrap: wrap;
  }

  li {
    flex-basis: 50%;
    color: green;
    height: 100px;
    background-color: gray;
    border: 1px solid black;
    box-sizing: border-box;
    animation: fade 4s  infinite ;
    animation-delay: 0s;
    animation-timing-function: linear;
  }

  li:nth-of-type(2) {
    animation-delay: 1s;
  }
  li:nth-of-type(3) {
    animation-delay: 2s;
  }
  li:nth-of-type(4) {
    animation-delay: 3s;
  }
  @keyframes fade {
    0% {
      color: black;
    background-color: gray;
    }
    25% {
      background-color: #1b385c;
      color: white;
    }
    50% {
        background-color: gray;
      color: white;

    }
    100% {
        color: black;
        background-color: gray;
    }
  }
0 голосов
/ 11 октября 2018

Ваши ключевые кадры анимации неверны, потому что 100% анимации это не время, когда вы анимируете этот элемент, а время, когда вы анимируете все элементы (полный цикл, который повторяется).Итак, поскольку у вас есть 4 элемента, ваша анимация должна быть: 

            25%         50%         75%         100%
/* animation *************************************/
/************* animation *************************/
/************************* animation *************/
/************************************* animation */

Что означает: 

 @keyframes fade {
  from {
    color: black;
  }
  12.5% { /* peak of animation */
    color: white;
    background-color: #1b385c;
  }
  25% { /* end of animation */
    color: black;
    background-color: gray;
  }
  to { 
    /* 75% stand still - same value as 25% and from */
  }
}

Вам на самом деле не нужно to здесь.Я просто положил его туда, чтобы прокомментировать.Вы можете удалить его.
И animation должно быть: 

animation: fade 4s linear infinite;

(Я удаляю альтернативу: вы не разворачиваетесь, потому что она не симметрична. Она анимирована на 25% иостальные 75% все еще.) См. это работает: 

ul {
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
}

li {
  flex-basis: 50%;
  color: green;
  height: 100px;
  background-color: gray;
  border: 1px solid black;
  box-sizing: border-box;
  animation: fade 4s linear infinite;
}

li:nth-of-type(2) {
  animation-delay: 1s;
}
li:nth-of-type(3) {
  animation-delay: 2s;
}
li:nth-of-type(4) {
  animation-delay: 3s;
}
 @keyframes fade {
  from {
    color: black;
  }
  12.5% {
    color: white;
    background-color: #1b385c;
  }
  25% {
    color: black;
    background-color: gray;
  }
}
<ul>
  <li>content 1</li>
  <li>content 2</li>
  <li>content 3</li>
  <li>content 4</li>
</ul>
...