CSS3动画野生动物园不起作用

Question

我为网站创建了一个雷达CSS3动画，该动画几乎可以在所有浏览器上正常工作，但Safari浏览器最新版本除外，该版本不显示边框。 如果我们添加背景色，则会显示出来，但边框不可见。 已经挖掘了一段时间，但找不到解决方案。 我说的是0％和100％关键帧中的边框。

这是HTML和CSS3

 .radar-desktop { bottom: 0; left: 0; top: auto; right: 0; width: 100%; height: 100%; display: block; margin: 0px auto; flex: unset !important; position: relative; } .wave-desktop { width: 0%; padding-top: 0%; background-color: transparent; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; max-width: 100%; max-height: 100%; } .wave-desktop.time1-desktop { background-image: none; background-repeat: no-repeat; background-size: 120px 120px; width: 120px; height: 120px; background-position: center; } .wave-desktop.time2-desktop { -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 0s infinite; animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 0s infinite; } .wave-desktop.time3-desktop { -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 1s infinite; animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 1s infinite; } .wave-desktop.time4-desktop { -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 2s infinite; animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 2s infinite; } .wave-desktop.time5-desktop { -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 2s infinite; animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 2s infinite; } .wave-desktop.time6-desktop { -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 3s infinite; animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 3s infinite; } .wave-desktop.time7-desktop { -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 3s infinite; animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 3s infinite; } .wave-desktop.time8-desktop { -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 4s infinite; animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 4s infinite; min-width: 150px; min-height: 150px; } @-webkit-keyframes radardesktop { 0% { width: 0%; padding-top: 0%; border: 1px solid #000000; z-index: 4; } 25% { z-index: 3; } 50% { z-index: 2; } 75% { z-index: 1; } 100% { width: 100%; padding-top: 100%; border: 1px solid #000000; } } @keyframes radardesktop { 0% { width: 0%; padding-top: 0%; border: 1px solid #000000; z-index: 4; } 25% { z-index: 3; } 50% { z-index: 2; } 75% { z-index: 1; } 100% { width: 100%; padding-top: 100%; border: 1px solid #000000; } } 

 <div class="radar-desktop"> <div class="wave-desktop time1-desktop"></div> <div class="wave-desktop time2-desktop"></div> <div class="wave-desktop time3-desktop"></div> <div class="wave-desktop time4-desktop"></div> <div class="wave-desktop time5-desktop"></div> <div class="wave-desktop time6-desktop"></div> <div class="wave-desktop time7-desktop"></div> <div class="wave-desktop time8-desktop"></div> </div> 

谢谢

Answer 1

找到了解决方案。

.wave-desktop {
    width: 0%;
    padding-top: 0%;
    background-color: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    max-width:100%;
    max-height:100%;
}
    .wave-desktop.time1-desktop {
        background-image: none;
        background-repeat: no-repeat;
        background-size: 120px 120px;
        width:120px;
        height:120px;
        background-position: center;

    }
    .wave-desktop.time2-desktop {
      -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 0s infinite;
              animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 0s infinite;
              border:1px solid;
    }
    .wave-desktop.time3-desktop {
      -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 1s infinite;
              animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 1s infinite;
              border:1px solid;
    }
    .wave-desktop.time4-desktop {
      -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 2s infinite;
              animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 2s infinite;
              border:1px solid;
    }
    .wave-desktop.time5-desktop {
      -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 2s infinite;
              animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 2s infinite;
              border:1px solid;
    }
    .wave-desktop.time6-desktop {
      -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 3s infinite;
              animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 3s infinite;
              border:1px solid;
    }
    .wave-desktop.time7-desktop {
      -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 3s infinite;
              animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 3s infinite;
              border:1px solid;
    }
    .wave-desktop.time8-desktop {
      -webkit-animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 4s infinite;
              animation: radardesktop 4s cubic-bezier(0.6, 0.96, 0.9, 0.95) 4s infinite;
              border:1px solid;
              min-width: 150px;
              min-height:150px;
    }

    @-webkit-keyframes radardesktop {
      0% {
        width: 0%;
        padding-top: 0%;
        border-color: #D9D9D9;
        background-color: transparent;
        z-index: 4;
      }
      25% {
        z-index: 3;
      }
      50% {
        z-index: 2;
      }
      75% {
        z-index: 1;
      }
      100% {
        width: 100%;
        padding-top: 100%;
        border-color: #D9D9D9;
        background-color: transparent;
      }
    }

    @keyframes radardesktop {
      0% {
        width: 0%;
        padding-top: 0%;
        border-color: #D9D9D9;
        background-color: transparent;
        z-index: 4;
      }
      25% {
        z-index: 3;
      }
      50% {
        z-index: 2;
      }
      75% {
        z-index: 1;
      }
      100% {
        width: 100%;
        padding-top: 100%;
        border-color: #D9D9D9;
        background-color: transparent;
      }
    }