Question 348368 in Html Question posted in
Some basic documentation can be found here.

Html – Why is my stoplight animation not working?

I’m trying to make this traffic light to turn on all the lights, but the CSS animation is not working. I have checked numerous times for any missing brackets as well as any other issues.

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>
Tags:

3

Answers


  1. 0

    Your CSS for each p element uses a large border which means that the white colour you can see is the border.
    In your animation keyframes declaration color sets the color of the text.
    Therefore if you change this to border-color; it will then start to animate.
    Of course I do not know the full extent of the project but you will need to incorporate an animation delay to make it look like a real traffic light or consider another way to control the timings.

    Repeat the below for each of the three animations:

    @keyframes colorOne {
  0% {
    border-color: black;
  }
  50% {
    border-color: red;
  }
  75% {
    border-color: black;
  }
  100% {
    border-color: red;
  }
}
    Login or Signup to reply.
  2. 0

    There are a number of things to compare and contrast between the CSS in the working example below and the CSS in your question, above.

    1. Did you mean for the lights to be upside down (flex-direction: column-reverse) or the right way up (flex-direction: column) ?

    2. If you want to animate the background color of an element, then, conventionally, we give the element a width and a height and use the background-color property.

    3. As above, normally, block level elements have a width and a height. But in a vertical flexbox environment, an element will have a width and a flex-basis. If you want a flex-basis (equivalent to a height in this instance) to be 198px and you want this to neither grow nor shrink, you will declare:

      flex: 0 0 198px;

    4. If you want the final frame of an animation to persist, then use animation-fill-mode: forwards

    Working Example:

    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>
    Login or Signup to reply.
  3. 0

    I see you have a great answer but might I suggest a grid and let the orb content size determine the width/height given some padding on the container and between the orbs as a gap. Note I changed from a paragraph to a div to make that gap work best/better here.

    Using a grid like I have for the BODY and orb container "super-centers" the element/grid contents easily.

    Give the orbs a class to make it more DRY, then just put the "color" on each (I used a class for clarity rather than the IDs)

    As an addition I put color variables in place for the background of each and added a border to show the use of that can be for the orb size and not all this huge bordering you had.

    Try changing the orb size from 8em and see how it adjusts.

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search