html - 即使声明了 webkit 关键帧，CSS 动画边框底部也无法在 Safari 中工作

Question

我有一个问题，safari 没有为我的导航播放边框底部动画，它适用于 edge，firefox，chrome，只是不是 safari 我不太确定问题是什么......这是我的 css:

        @keyframes pageon{
            0% {border-bottom: 0px solid #7b7b7b;}
            100% {border-bottom: 3px solid #7b7b7b;}
        }

        @-webkit-keyframes pageon{
            0% {-webkit-border-bottom: 0px solid #7b7b7b;}
            100% {-webkit-border-bottom: 3px solid #7b7b7b;}
        }

        .pageon{
            animation-name: pageon;
            animation-duration: 200ms;
            animation-iteration-count: 1;
            animation-timing-function: ease-in;
            animation-fill-mode: forwards;
            -webkit-animation-name: pageon;
            -webkit-animation-duration: 200ms;
            -webkit-animation-iteration-count: 1;
            -webkit-animation-timing-function: ease-in;
            -webkit-animation-fill-mode: forwards;
        }


        @keyframes pageoff{
            0% {border-bottom: 3px solid #7b7b7b;}
            100% {border-bottom: 0px solid #7b7b7b;}
        }

        @-webkit-keyframes pageoff{
            0% {-webkit-border-bottom: 3px solid #7b7b7b;}
            100% {-webkit-border-bottom: 0px solid #7b7b7b;}
        }

        .pageoff{
            animation-name: pageoff;
        animation-duration: 200ms;
        animation-iteration-count: 1;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
            -webkit-animation-name: pageoff;
            -webkit-animation-duration: 200ms;
            -webkit-animation-iteration-count: 1;
            -webkit-animation-timing-function: ease-out;
            -webkit-animation-fill-mode: forwards;
        }

请帮忙!!谢谢:))

Answer 1

显然是 Safari 上的一个错误，只需将初始边框属性添加到您的元素 border-bottom: 0px solid #7b7b7b; 正如您在示例中看到的那样。

.pageon{
  width: 100px;
  height: 200px;
  background-color: tomato;
  border-bottom: 0px solid #7b7b7b;
  animation: 500ms pageon infinite;
}

Working example on Safari