Помогите с анимации хочу сделать нечто интересное

Question

Помогите с анимации хочу сделать нечто интересное

Ильнар Ибрагимов Ученик (88), на голосовании 8 месяцев назад

Хочу чтобы постоянно повторял анимацию, красный и зеленый и постоянно повтора так же
html

css

 div { 
    width: 100px; 
    height: 100px; 
    position: relative; 
    background-color: red; 
    animation: run 4s linear, 4s run-one 4s linear; 
  } 
   
  @keyframes run { 
    0% { 
      background-color: red; 
      top: 0px; 
    } 
    25% { 
      background-color: red; 
      top: 200px; 
    } 
    50% { 
      background-color: red; 
      top: 200px; 
    } 
    75% { 
      background-color: red; 
      top: 200px; 
    } 
    100% { 
      background-color: red; 
      top: 500px; 
    } 
  } 
   
  @keyframes run-one { 
    0% { 
        background-color: green; 
        top: 0px; 
      } 
      25% { 
        background-color: green; 
        top: 200px; 
      } 
      50% { 
        background-color: green; 
        top: 200px; 
      } 
      75% { 
        background-color: green; 
        top: 200px; 
      } 
      100% { 
        background-color: green; 
        top: 500px; 
      } 
  }

Answer 1

Макар Новиков Мастер (1834) 9 месяцев назад

https://ru.stackoverflow.com/questions/771114/%D0%91%D0%B5%D1%81%D0%BA%D0%BE%D0%BD%D0%B5%D1%87%D0%BD%D0%B0%D1%8F-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D1%8F-css

Удачи)

Ильнар ИбрагимовУченик (88) 9 месяцев назад

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

Макар Новиков Мастер (1834) Ильнар Ибрагимов, тогда тебе на CyberForum , не поленись, зарегайся , там 100% дадут правильный ответ. По таким вопросам лучше сразу тудаю

Answer 2

Какую анимацию в принципе хочешь сделать?
И да, зачем плодишь одинаковые значения для 25%, 50%, 75%?

Answer 3

 div { 
  animation: run 1s linear infinite; 
} 

@keyframes run { 
  0% { 
    background-color: red; 
    top: 0px; 
  } 
  50% { 
    background-color: green; 
    top: 200px; 
  } 
  100% { 
    background-color: red; 
    top: 500px; 
  } 
}

Но я бы разделил и сделал отдельно анимации на перемещение и отдельно на смену цвета