Typed.js动画眨眼光标不起作用

Question

So I'm trying to use the blinker cursor on typed.js an awesome js.plugin which can be found here: https://github.com/mattboldt/typed.js

I'm trying to get the blinker cursor inline with the text as it types but as you can see at the minute from the jsfiddle: https://jsfiddle.net/harrydry/p4ev1nj2/ it is just blinking on the side.

The reason for this is that I have applied some an id to typed so that the text is centered and the font is changed etc.

Unfortunately, this seems to have ruined the blinker effect.

Is anyone aware of how to get both the blinker working with CSS styling applied as shown on the js fiddle.

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

This is the code on typed.js page to get the typed-cursor blinking correctly

Thanks a lot for any help. Of course, I will upvote the correct answer etc. Enjoy the day harry :)

Answer 1

That's what worked for me:

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

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

Answer 2

This code works for me

.typed-cursor{
        opacity: 1;
        font-weight: 100;
        -webkit-animation: blink 0.7s infinite;
        -moz-animation: blink 0.7s infinite;
        -ms-animation: blink 0.7s infinite;
        -o-animation: blink 0.7s infinite;
        animation: blink 0.7s infinite;
    }

Answer 3

I hope this will help. Works fine for me.

.typed-cursor {
    -webkit-animation: blinker 1s linear infinite;
            animation: blinker 1s linear infinite;
}

@-webkit-keyframes blinker {
    50% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
}

@keyframes blinker {
    50% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
}

Answer 4

I was also trying to fix the issue, But I found something similar answer. Hope this will work.

.your-class:after{
    visibility: visible;
    content: '';
    background-color: #fff;
    display: inline-block;
    position: relative;
    width: 2px;
    height: 1em;
    top: 5px;
    margin-left: 3px; }