Question

我想强调一些关于使用CSS动画和时间延迟的文字。

这通常是相当直接的。我知道以下代码可以运行，因为我已经测试并运行它。

.tester {
  background-color: rgba(199, 220, 101, 0); 
  animation: example 1s linear 6s 1; 
  animation-fill-mode: forwards;	
}

@keyframes example {
  0% {
    background-color: rgba(199, 220, 101, 0);
  }
  100% {
    background: rgba(199, 220, 101, 1);
  }
}

<p>
  In writing <span class="tester">this book</span> I have drawn consciously and unconsciously from one million outside sources.
</p>

但是我正在运行一个名为typed.js的JavaScript插件。这意味着文本输出。但我想要的效果是输入的文本（这很好），然后在一段时间后延迟一些要突出显示的文本。但我的CSS动画在typed.js中不起作用。

如果你去 http://www.thebooktheworldwrote.com/

我解释了这个问题。我想要的效果是4秒后“好人”的亮点。只需添加-webkit-这样的“好人”亮点。在那一刻它不是。

打字效果目前无法实现。我能做的最好的是突出显示go，

这个词的一些部分

查看https://jsfiddle.net/harrydry/p4ev1nj2/3/以便最好地了解问题。

Answer 1

您能否提供更多信息？

尝试使您想要突出显示的文本使字体变粗，并查看此github页面，您可能需要对type.js进行一些小编辑，如与超时相关的配置

https://github.com/mattboldt/typed.js/blob/master/README.md

Answer 2

尝试这样的事情

.tester{
    animation-name: highlight;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    background-color: green;
}

@keyframes highlight{
    from {background-color: green;}
    to {background: lightgreen;}
}
@-webkit-keyframes highlight{
    from {background-color: green;}
    to {background: lightgreen;}
}
@-moz-keyframes highlight{
    from {background-color: green;}
    to {background: lightgreen;}
}

使用此功能可以获得背景颜色变化的淡入淡出效果。

此处的完整示例https://jsfiddle.net/2r1hs76u/

如果您不想要淡化效果，请使用animation-delay

这样的#

如何在JavaScript插件中使用CSS动画？

2 个答案: