Question

我在:before上设置了动画设置，可以在Chrome上正常使用，但在Firefox上它也不适用于Safari（IOS9 iPhone或9 - El Capitan）。

＆＃13;

.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";}
}

＆＃13;

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

＆＃13;

Answer 1

我也经历了整个网络我没有发现任何东西，根据以下参考我们只能用JavaScript实现。

在我自己的测试中，动画内容仅适用于稳定的桌面 Chrome（撰写时为第46版）。其他地方没有支持。没有Safari 在桌面或iOS上。没有Firefox。没有IE。每个浏览器都会忽略动画，仅显示伪原始内容元件。

Reference

Answer 2

如@Pavan Kumar Jorrigala所述，除了在桌面上的Chrome中外，无法为伪元素的content属性设置动画。

这是对你想要实现的目标的一种后退方法：

jsfiddle

＆＃13;

.hey span {
  color: transparent;
  animation: heyThere 100ms;
  animation-fill-mode: forwards;
}

.hey span:nth-child(1) {
  animation-delay: 100ms;
}
.hey span:nth-child(2) {
  animation-delay: 300ms;
}
.hey span:nth-child(3) {
  animation-delay: 500ms;
}
.hey span:nth-child(4) {
  animation-delay: 700ms;
}
.hey span:nth-child(5) {
  animation-delay: 900ms;
}
.hey span:nth-child(6) {
  animation-delay: 1100ms;
}
.hey span:nth-child(7) {
  animation-delay: 1300ms;
}
.hey span:nth-child(8) {
  animation-delay: 1500ms;
}

@keyframes heyThere {
    0% {color: transparent;}
  100% {color: red;}
}

＆＃13;

<div class="hey">
  <span>H</span>
  <span>e</span>
  <span>y&nbsp;</span>
  <span>T</span>
  <span>h</span>
  <span>e</span>
  <span>r</span>
  <span>e</span>
</div>

＆＃13;

Answer 3

@asimovwasright回答是对的。

为避免对css进行如此多的重复，我使用带有SCSS的@for来遍历所有可用的跨度（在本例中为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>

Answer 4

在safari和firefox中，代码不是动画，而是你必须编写-moz-animation和-webkit-animation，就像这段代码一样：

.hey {
  color: white;
}
.hey:before {
  content: 'Hey \a there';
  white-space: pre;
  position: absolute;
  color: red;
  animation: heyThere 2250ms steps(11);
  -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";}
}

`

Answer 5

尝试将display属性添加到：before。例如，添加display：block;并查看它是否会影响动画。

css动画＆＃34;内容：＆＃34;不适用于Safari和Firefox

5 个答案: