Typed.js动画闪烁光标不起作用

Question

所以我试图在typed.js上使用blinker游标,这是一个很棒的js.plugin,可以在这里找到:https://github.com/mattboldt/typed.js

我正在尝试将闪烁光标与文本内联,因为它的类型,但你可以在jsfiddle的那一刻看到:https://jsfiddle.net/harrydry/p4ev1nj2/ 它只是在侧面闪烁.

这样做的原因是我已经应用了一些id来键入,以便文本居中并且字体被更改等.

不幸的是,这似乎破坏了闪光效应.

是否有人知道如何使用CSS样式处理两个问题,如js小提琴所示.

    .typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
    }
    @keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
    }
    @-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
    }
    @-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
    }

这是typed.js页面上的代码,用于使键入的游标正确闪烁

非常感谢您的帮助.当然,我会赞成正确的答案等.享受哈利的一天:)

Answer 1

这对我有用:

 .typed-cursor {
        opacity: 1;
        animation: blink .7s infinite;
    }

    @keyframes blink {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }