Html css动画在safari中不起作用，即使声明了webkit关键帧

我有一个问题，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;
        }

---

请帮忙！！谢谢：）

显然是Safari上的一个bug，只需将初始边框属性添加到元素

边框底部：0px solid 35; 7b如示例中所示

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

[请参阅此]