“内容：”上的CSS动画在Safari和Firefox上不起作用

小编典典

“内容：”上的CSS动画在Safari和Firefox上不起作用

css

我设置了一个动画:before，可以在Chrome 上正常运行，但是不能在Safari（IOS9 iPhone或9-El
Capitan）上运行，也不能在Firefox上运行。

.hey {

  color: white;

}

.hey:before {

  content: 'Hey \a there';

  white-space: pre;

  position: absolute;

  color: red;

 -moz-animation: heyThere 2250ms steps(11); /* for firefox */

  -webkit-animation: heyThere 2250ms steps(11); /* for safari, chrome & opera */

}



@keyframes heyThere {

    0% {content: "";}

    1% {content: "";}

    75% {content: "";}

    77% {content: "H";}

    80% {content: "He";}

    83% {content: "Hey";}

    85% {content: "Hey ";}

    87% {content: "Hey \a t";}

    90% {content: "Hey \a th";}

    93% {content: "Hey \a the";}

    95% {content: "Hey \a ther";}

    97% {content: "Hey \a there";}

    100% {content: "Hey \a there";}

}

@-moz-keyframes heyThere { /* animation for firefox */

    0% {content: "";}

    1% {content: "";}

    75% {content: "";}

    77% {content: "H";}

    80% {content: "He";}

    83% {content: "Hey";}

    85% {content: "Hey ";}

    87% {content: "Hey \a t";}

    90% {content: "Hey \a th";}

    93% {content: "Hey \a the";}

    95% {content: "Hey \a ther";}

    97% {content: "Hey \a there";}

    100% {content: "Hey \a there";}

}

@-webkit-keyframes heyThere { /* animation for chrome, safari & opera */

    0% {content: "";}

    1% {content: "";}

    75% {content: "";}

    77% {content: "H";}

    80% {content: "He";}

    83% {content: "Hey";}

    85% {content: "Hey ";}

    87% {content: "Hey \a t";}

    90% {content: "Hey \a th";}

    93% {content: "Hey \a the";}

    95% {content: "Hey \a ther";}

    97% {content: "Hey \a there";}

    100% {content: "Hey \a there";}

}


<div class="hey">Hey there</div>

阅读 395

2020-05-16

共1个答案

小编典典

@asimovwasright的答案是正确的。

为了避免在CSS上发生太多重复，我将@forSCSS与一起使用，以遍历所有可用范围（在本例中为8）

.hey {
    span {
        color: transparent;
        animation: heyThere 500ms ease-out;
        animation-fill-mode: forwards;

        $chars: 8;
        @for $i from 1 through $chars {
            &:nth-of-type(#{$i}) {
                animation-delay: 1200+70ms*$i;
            }
        }
    }
}

和HTML：

<h2 class="hey">
   <span>H</span>
   <span>e</span>
   <span>y</span>
   <br>
   <span>t</span>
   <span>h</span>
   <span>e</span>
   <span>r</span>
   <span>e</span>
</h2>

2020-05-16