Как сделать мигающий текст в html
Перейти к содержимому

Как сделать мигающий текст в html

  • автор:


HTML тег <blink>

Тег <blink> используется для установки мигания текста.


Тег <blink> — парный, закрывающий элемент (</blink>) обязателен.



Элемент blink

Мигающий текст с помощью CSS

Чтобы достичь эффекта мигания, вы можете использовать свойство CSS animation, определенное с помощью правила @keyframes.


Текст в данном примере исчезает, а затем появляется снова. С помощью CSS-кода можно также изменить внешний вид мигающего текста.

Мигающий текст с помощью JavaScript

Вы также можете использовать скрипты, чтобы элемент мигал.


В вышеупомянутом примере скрипт установлен, чтобы скрыть текст, когда он появляется, и заставить его появляться, когда он исчезает, тем самым достигая мигающего эффекта.

How to make blinking/flashing text with CSS 3

It blinks, but it only blinks in «one direction». I mean, it only fades out, and then it appears back with opacity: 1.0 , then again fades out, appears again, and so on.

I would like it to fade out, and then «raise» from this fade back again to opacity: 1.0 . Is that possible?

Peter Mortensen's user avatar

ojek's user avatar

14 Answers 14

You are first setting opacity: 1; and then you are ending it on 0 , so it starts from 0% and ends on 100% , so instead just set opacity to 0 at 50% and the rest will take care of itself.

Here, I am setting the animation duration to be 1 second , and then I am setting the timing to linear . That means it will be constant throughout. Last, I am using infinite . That means it will go on and on.

Note: If this doesn’t work for you, use browser prefixes like -webkit , -moz and so on as required for animation and @keyframes . You can refer to my detailed code here

As commented, this won’t work on older versions of Internet Explorer, and for that you need to use jQuery or JavaScript.

Thanks to Alnitak for suggesting a better approach.

Peter Mortensen's user avatar

Mr. Alien's user avatar

The best way to get a pure «100% on, 100% off» blink, like the old <blink> is like this:

Eaten by a Grue's user avatar

Use the alternate value for animation-direction (and you don’t need to add any keframes this way).


The animation should reverse direction each cycle. When playing in reverse, the animation steps are performed backward. In addition, timing functions are also reversed; for example, an ease-in animation is replaced with an ease-out animation when played in reverse. The count to determinate if it is an even or an odd iteration starts at one.


I’ve removed the from keyframe. If it’s missing, it gets generated from the value you’ve set for the animated property ( opacity in this case) on the element, or if you haven’t set it (and you haven’t in this case), from the default value (which is 1 for opacity ).

And please don’t use just the WebKit version. Add the unprefixed one after it as well. If you just want to write less code, use the shorthand.

Make It Blink HTML Tutorial – How to Use the Blink Tag, with Code Examples

Colby Fayock

Colby Fayock


Make It Blink HTML Tutorial – How to Use the Blink Tag, with Code Examples

In the earlier days of the web, HTML elements like the blink tag were native ways to add some animation effects to liven up a webpage. How can we use those animations today to add flare to our websites and apps?

What is the HTML tag blink?

The blink tag ( <blink> ) is an obsolete HTML tag that makes the content of that tag slowly flash.

Google search of «blink tag»

This, along with some other obsolete tags like the marquee tag ( <marquee> ), were an easy way to add simple animation effects to your site.

How do you use the blink tag?

Being that the blink tag was a simple HTML element, you would use it right in line with your content.

For example, if you wanted the word «blink» in blink-182 to blink, you would write the following HTML:

Can you still use the blink tag?

As you might have noticed in the gif above, this tag is obsolete.


Blink tag browser compatibility

This means you can’t use the blink HTML tag itself. However, that shouldn’t stop us from remaking it in all of its blinking glory.

Note: the Blink tag was deprecated due to accessibility concerns. Please do your research before trying to use a solution that provides the same effect, as we should all be making an effort to make our projects as inclusive as possible.

Recreating the blink tag with CSS animations

In today’s web development world, animations are generally handled with CSS or JavaScript. Using CSS animations, we can recreate our blink tag with a few lines and be back in business.

With the following CSS:

You can add the .blink class to any HTML element to make it blink.

HTML CSS blink effect

Modernizing the blink tag

This is 2020, what if we wanted something a little smoother?

Well to start, we can make the animation fade by removing the steps from the animation definitions.

Blink fade effect

Or what if we wanted to make it fade out like a sci-fi effect?

CSS blink fade sci-fi effect

Or even a nice grow and fade effect.

CSS blink grow and fade effect

Taking control of animations with CSS

Though you might not be able to use the blink tag, you still have a lot of options. CSS provides a ton of animation options natively, so whether you want to recreate your favorite HTML pastime or recreate the Alien title sequence, the possibilities are virtually endless.

<blink>: элемент «Мигающий текст».

Устарело: эта функция больше не рекомендуется. Хотя некоторые браузеры могут по-прежнему поддерживать его, возможно, он уже был удален из соответствующих веб-стандартов, может быть удален или может быть сохранен только в целях совместимости. Избегайте его использования и, если возможно, обновите существующий код; см. таблицу совместимости внизу этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любой момент.

<blink> HTML элемент не является стандартным элементом , который вызывает приложенный текст медленно мигать.

Предупреждение: не используйте этот элемент, так как он устарел и является плохой практикой проектирования. Мигающий текст не одобряется некоторыми стандартами доступности, а спецификация CSS позволяет браузерам игнорировать элемент <blink> .

DOM interface

Этот элемент не поддерживается и, следовательно, реализует интерфейс HTMLUnknownElement .


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *