Blink css animation: html — Imitating a blink tag with CSS3 animations

Как создать эффект мерцания с помощью анимации CSS3

Часто эффект мерцания используется, чтобы привлечь внимание пользователей к какому-то тексту на вашем сайте. Если вам нужен такой эффект, попробуйте использовать анимацию CSS.

CSS3 позволяет создавать анимацию без кода Javascript. Чтобы получить эффект мерцания текста, вам также понадобится правило @keyframes. Мы используем анимацию CSS, определяя некоторые ключевые кадры для нашей мигающей текстовой анимации и устанавливаем видимость на «скрытый». В нашем примере ниже мы также добавляем -webkit- расширение свойства анимации для большей совместимости с браузерами.

Пример создания эффекта мигающего текста с анимацией CSS3:

 

  <голова>
    
    <стиль>
      .blink {
        анимация: мигание-анимация 1с шагов(5, старт) бесконечно;
        -webkit-animation: мигание-анимация 1с шагов(5, старт) бесконечно;
      }
      @keyframes мерцание-анимация {
        к {
          видимость: скрытая;
        }
      }
      @-webkit-keyframes blink-animation {
        к {
          видимость: скрытая;
        }
      }
     
  
  <тело>
    Вот мигающий текст. 
  
 

Попробуй сам »

Результат

Вот мигающий текст.

Давайте посмотрим на другой пример, где у нас есть мигающий текст в элементе внутри блока

 

  <голова>
    
    <стиль>
      .blink {
        ширина: 220 пикселей;
        высота: 50 пикселей;
        цвет фона: #342ab8;
        отступ: 10 пикселей;
        выравнивание текста: по центру;
        высота строки: 50px;
      }
      охватывать {
        размер шрифта: 26px;
        семейство шрифтов: скоропись;
        цвет: #fff;
        анимация: мерцание 2с линейное бесконечное;
      }
      @ключевые кадры мигают {
        0% {
          непрозрачность: 0;
        }
        50% {
          непрозрачность: 0,5;
        }
        100% {
          непрозрачность: 1;
        }
      }
    
  
  <тело>
    <дел>
      мигающий текст
    

Попробуй сам »

Также можно использовать мигающий фон с анимацией CSS3. Здесь также мы создаем набор ключевых кадров, а затем указываем цвет фона в начальной и конечной точках.

Пример создания мигающего фона:

 

  <голова>
    
    <стиль>
      @ключевые кадры мигают {
        0% {
          цвет фона: #06c3d1;
          граница: 3px сплошная #666;
        }
        100% {
          цвет фона: #270da6;
          граница: 3px сплошная #666;
        }
      }
      #моргать {
        ширина: 200 пикселей;
        высота: 200 пикселей;
        анимация: мигание 1с бесконечно;
      }
     
  
  <тело>
    <дел>
  
 

Попробуй сам »

переходов css — Как создать «мигающий» текст только с помощью CSS?

спросил 5 лет, 7 месяцев назад

Изменено 1 год, 7 месяцев назад

Просмотрено 15 тысяч раз

Я пытаюсь создать решение для мерцания текста только с помощью CSS. В тексте должно быть написано:

Исследования…

и я бы хотел, чтобы он появлялся и исчезал, создавая у пользователя впечатление, что он исследует в том же темпе, что и бьющееся сердце.

Это код, который у меня есть:

HTML :

 
Исследование...
 

CSS :

 .мигает {
    переход: непрозрачность 2s плавность входа-выхода бесконечный;
  непрозрачность: 1;
}
непрозрачность @keyframes {
  0% {
    непрозрачность: 1;
  }
  50% {
    непрозрачность: 0,5
  }
  100% {
    непрозрачность: 0;
  }
}
 

Но это не работает, также это для расширения хрома, поэтому, пока он работает в последней версии хрома, должно быть достаточно.

• css
• css-переходы

2

Ваша проблема в том, что вы используете переход и анимацию в 1 строку.

Измените переход на анимацию , как показано ниже. Также изменил непрозрачность на 1 -> 0 -> 1 вместо 1 -> 0,5 -> 0, потому что вы хотите, чтобы мерцание не было 1 -> 0, а затем не было перехода к непрозрачности 1 снова.

Скрипка: https://jsfiddle.net/kc6936cw/

 .blinking {
    анимация: непрозрачность 2 с, плавность входа-выхода бесконечна;
    непрозрачность: 1;
}
непрозрачность @keyframes {
  0% {
    непрозрачность: 1;
  }
  50% {
    непрозрачность: 0
  }
  100% {
    непрозрачность: 1;
  }
}
 

Редактировать: Также можно использовать комментарий jtmingus:
Вы также можете добавить альтернативный тег в конец вместо перехода от 1 -> 0 -> 1. Это будет выглядеть как анимация: непрозрачность 2s easy- вход-выход бесконечного чередования;

2

Это должно сработать

 .мигает {
    анимация: mymove 2s бесконечная альтернатива;
}
@keyframesмоё перемещение {
    из {непрозрачность:0;}
    в {непрозрачность: 1;}
} 

Исследование.