使用css写一个红绿灯交替的动画效果

使用css写一个红绿灯交替的动画效果 <title>document</title> <style> .box{ margin: 0 auto; width: 80px; border-radius: 40px; border: 3px solid #333; background-color: #333; display: flex; align-items: center; justify-content: space-between; flex-direction: column; } .light{ width: 50px; height: 50px; border-radius: 50%; margin: 10px 0; background: #000; opacity: .1; } .red{ background: #ff0000; animation: 12s red infinite; } .yellow{ background: #ffff00; animation: 12s yellow infinite; } .green{ background: #31da38; animation: 12s green infinite; } @Keyframes red{ 0%{opacity: 1;} 30%{opacity: 1;} 33%{opacity: .1;} } @Keyframes yellow{ 0%{opacity: .1;} 33%{opacity: .1;} 36%{opacity: 1;} 63%{opacity: 1;} 66%{opacity: .1;} } @Keyframes green{ 0%{opacity: .1;} 66%{opacity: .1;} 69%{opacity: 1;} 97%{opacity: 1;} 100%{opacity: .1;} } </style>