So I'm trying to use the blinker cursor on typed.js an awesome js.plugin which can be found here: .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: / 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 :)

So I'm trying to use the blinker cursor on typed.js an awesome js.plugin which can be found here: https://github./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/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 :)

• javascript
• jquery
• css
• typed.js

Share Improve this question Follow edited Sep 20, 2016 at 2:52 smalinux 1,15022 gold badges1313 silver badges2929 bronze badges asked Sep 19, 2016 at 23:02 Harry DryHarry Dry 1111 silver badge66 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

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

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

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

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