Программирование
+4Помогите с анимации хочу сделать нечто интересное
Хочу чтобы постоянно повторял анимацию, красный и зеленый и постоянно повтора так же
html
1
<div></div> css
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
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;
}
}
По дате
По рейтингу
12345678910111213141516171819
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;
}
}
Но я бы разделил и сделал отдельно анимации на перемещение и отдельно на смену цвета
Какую анимацию в принципе хочешь сделать?
И да, зачем плодишь одинаковые значения для 25%, 50%, 75%?
