Почему у меня не работает анимация светофора?
Я пытаюсь заставить этот светофор включать все огни, но анимация CSS не работает. Я много раз проверял отсутствие скобок, а также любые другие проблемы.
div {
background-color: rgb(0, 0, 0);
border: 15px solid rgba(128, 119, 119, 0.877);
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column-reverse;
width: 400px;
height: 500px;
}
@keyframes colorOne {
25% {color: black;}
50% {color: red;}
75% {color: black;}
100% {color: red;}
}
#c1 {
border: 99px solid white;
border-radius: 50%;
animation-name: colorOne;
animation-duration: 5s;
}
@keyframes colorTwo {
25% {color: black;}
50% {color: yellow;}
75% {color: black;}
100% {color: yellow;}
}
#c2 {
border: 99px solid white;
border-radius: 50%;
animation-name: colorTwo;
animation-duration: 5s;
}
@keyframes colorThree {
25% {color: black;}
50% {color: green;}
75% {color: black;}
100% {color: green;}
}
#c3 {
border: 99px solid white;
border-radius: 50%;
animation-name: colorThree;
animation-duration: 5s;
}<div>
<p id = "c1"></p>
<p id = "c2" ></p>
<p id = "c3"></p>
</div>
Ответы 3
Ваш CSS для каждого элемента p использует большую рамку, что означает, что белый цвет, который вы видите, является рамкой.
В объявлении ключевых кадров анимации color задается цвет текста.
Поэтому, если вы измените это на border-color; затем он начнет анимироваться.
Конечно, я не знаю всех масштабов проекта, но вам нужно будет включить задержку анимации, чтобы она выглядела как настоящий светофор, или рассмотреть другой способ управления таймингом.
Повторите приведенные ниже действия для каждой из трех анимаций:
@keyframes colorOne {
0% {
border-color: black;
}
50% {
border-color: red;
}
75% {
border-color: black;
}
100% {
border-color: red;
}
}
Есть ряд вещей, которые можно сравнить и противопоставить CSS в рабочем примере ниже и CSS в вашем вопросе выше.
Вы имели в виду, что свет должен быть перевернут (
flex-direction: column-reverse) или правильно (flex-direction: column)?Если вы хотите анимировать цвет фона элемента, то обычно мы присваиваем элементу
widthиheightи используем свойствоbackground-color.Как и выше, обычно элементы уровня блока имеют
widthиheight. Но в вертикальной средеflexboxэлемент будет иметьwidthиflex-basis. Если вы хотите, чтобыflex-basis(в данном случае эквивалентheight) было198pxи вы хотите, чтобы он не увеличивался и не уменьшался, вы объявите:flex: 0 0 198px;Если вы хотите, чтобы последний кадр
animationсохранялся, используйтеanimation-fill-mode: forwards.
Рабочий пример:
div {
background-color: rgb(0, 0, 0);
border: 15px solid rgba(128, 119, 119, 0.877);
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 400px;
height: 500px;
}
@keyframes colorOne {
25% {background-color: black;}
50% {background-color: red;}
75% {background-color: black;}
100% {background-color: red;}
}
#c1 {
flex: 0 0 198px;
width: 198px;
background-color: white;
border-radius: 50%;
animation: colorOne 5s linear forwards;
}
@keyframes colorTwo {
25% {background-color: black;}
50% {background-color: yellow;}
75% {background-color: black;}
100% {background-color: yellow;}
}
#c2 {
flex: 0 0 198px;
width: 198px;
background-color: white;
border-radius: 50%;
animation: colorTwo 5s linear forwards;
}
@keyframes colorThree {
25% {background-color: black;}
50% {background-color: green;}
75% {background-color: black;}
100% {background-color: green;}
}
#c3 {
flex: 0 0 198px;
width: 198px;
background-color: white;
border-radius: 50%;
animation: colorThree 5s linear forwards;
}<div>
<p id = "c1"></p>
<p id = "c2" ></p>
<p id = "c3"></p>
</div>Я вижу, что у вас есть отличный ответ, но могу ли я предложить сетку и позволить размеру содержимого сферы определять ширину/высоту с учетом некоторого отступа на контейнере и между сферами в качестве зазора. Обратите внимание, что я изменил абзац на элемент div, чтобы этот пробел работал здесь лучше/лучше.
Используя сетку, подобную той, которую я использовал для контейнера BODY и сферы, легко «суперцентрировать» содержимое элемента/сетки.
Присвойте шарам класс, чтобы сделать его более СУХИМ, а затем просто присвойте каждому «цвет» (для ясности я использовал класс, а не идентификаторы).
В качестве дополнения я добавил переменные цвета для фона каждого из них и добавил рамку, чтобы показать, как ее можно использовать для размера сферы, а не для всей этой огромной границы, которая у вас была.
Попробуйте изменить размер сферы с 8em и посмотрите, как он изменится.
body,
* {
font-size: 16px;
box-sizing: border-box;
margin: 0;
padding: 0;
--orb-red: #FF0000;
--orb-yellow: #FFFF00;
--orb-green: #008000;
--orb-off: #000000;
}
body {
display: grid;
place-items: center;
}
.light-container {
background-color: #000000;
border: 1em solid rgba(128, 119, 119, 0.877);
padding: 2em;
display: grid;
place-items: center;
gap: 0.5em;
}
.light-orb {
border-radius: 50%;
animation-duration: 5s;
width: 8em;
height: 8em;
margin: 1em;
border: solid 0.25em #ffffff;
}
@keyframes colorOne {
25% {
background-color: var(--orb-off);
}
50% {
background-color: var(--orb-red);
}
75% {
background-color: var(--orb-off);
}
100% {
background-color: var(--orb-red);
}
}
@keyframes colorTwo {
25% {
background-color: var(--orb-off);
}
50% {
background-color: var(--orb-yellow);
}
75% {
background-color: var(--orb-off);
}
100% {
background-color: var(--orb-yellow);
}
}
@keyframes colorThree {
25% {
background-color: var(--orb-off);
}
50% {
background-color: var(--orb-green);
}
75% {
background-color: var(--orb-off);
}
100% {
background-color: var(--orb-green);
}
}
.top-light {
animation-name: colorOne;
}
.middle-light {
animation-name: colorTwo;
}
.bottom-light {
animation-name: colorThree;
}<div class = "light-container">
<div class = "light-orb top-light" id = "c1"></div>
<div class = "light-orb middle-light" id = "c2"></div>
<div class = "light-orb bottom-light" id = "c3"></div>
</div>
Добро пожаловать! Пожалуйста, ИЗМЕНИТЕ свой вопрос, указав свой код, не публикуйте свой код в качестве ответа. Вам также необходимо будет включить свой HTML, поскольку CSS без HTML бесполезен для отладки. Пожалуйста, прочитайте как создать минимальный воспроизводимый пример и создайте работоспособный фрагмент