「content：」のcssアニメーションはSafariとFirefoxでは機能しません

debugcn 投稿 Dev

サンドリーナ-p

:beforeChromeで正常に動作するアニメーションを設定していますが、Safari（IOS9iPhoneまたは9-ElCapitan）でも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>

サンドリーナ-p

@asimovwasrightの答えは正しいです。

cssでの繰り返しを避けるために@for、SCSSでaを使用して、使用可能なすべてのスパン（この場合は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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]