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

How to use a CSS animation within a JavaScript plugin?

本文关键字：CSS 动画 插件 JavaScript      更新时间：2023-09-26

我想使用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>

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

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

我解释这个问题。我想要的效果是4秒后"好人"的亮点。只是添加webkit的东西，这样"好人"的亮点。目前还不是。

这在当前的键入效果中是不可能的。我能做的最好的就是突出显示单词go中的一些部分，

查看https://jsfiddle.net/harrydry/p4ev1nj2/3/以获得对问题的最佳了解。

试试这样

.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 https://jsfiddle.net/2r1hs76u/2/

你能多给我们一些信息吗?

试着让你想要突出显示的文本使字体加粗，也检查一下这个github页面，你可能需要对type.js做一些小的编辑，就像在timeout

配置中一样https://github.com/mattboldt/typed.js/blob/master/README.md

相关文章：