So I am new to CSS3's animations and I'm not sure if I'm able to do what I want. Basically I want to make mimic traffic light using only CSS3. I was able to do it using JavaScript with the following code:
HTML Code:
<div id="trafficLight">
<input checked name="light" type="radio" />
<input name="light" type="radio" />
<input name="light" type="radio" />
</div>
Code:
#trafficLight {
border: 1px solid black;
display: inline-block;
padding: 0;
margin: 0;
}
input[type="radio"] {
border: 1px solid black;
border-radius: 50%;
display: block;
height: 50px;
padding: 0;
margin: 5px;
width: 50px;
-moz-appearance: none;
-webkit-appearance: none;
}
input[type="radio"]:nth-child(1):checked {
background-color: red;
}
input[type="radio"]:nth-child(2):checked {
background-color: yellow;
}
input[type="radio"]:nth-child(3):checked {
background-color: green;
}
Code:
changeRed();
function changeYellow() {
document.getElementsByName("light")[1].checked = true;
setTimeout(changeGreen, 1000);
}
function changeGreen() {
document.getElementsByName("light")[2].checked = true;
setTimeout(changeRed, 1000);
}
function changeRed() {
document.getElementsByName("light")[0].checked = true;
setTimeout(changeYellow, 1000);
}
However, using only CSS3 I've tried adding the following attributes:
Code:
input[type="radio"] {
border: 1px solid black;
border-radius: 50%;
display: block;
height: 50px;
padding: 0;
margin: 5px;
width: 50px;
-moz-appearance: none;
-webkit-appearance: none;
animation-name: changeChecked; /* here */
animation-duration: 2s; /* here */
}
/* here */
@keyframes changeChecked {
from {checked: false;}
to {checked: true;}
}
Am I able to even do what I'm trying to do?