Як зробити миготливий / миготливий текст за допомогою CSS 3


288

На даний момент у мене є цей код:

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

.waitingForConnection {
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 1.7s;
}

Він блимає, але блимає лише в одну сторону. Я маю на увазі, він тільки згасає, а потім з’являється назад opacity: 1.0, потім знову згасає, з’являється знову тощо.

Я хотів би, щоб він згасав, а потім "піднімався" з цього в'янення знову до opacity: 1.0. Це можливо?


1
Якщо ви подивитесь праворуч на цю сторінку, є стовпець під назвою " Пов'язані з багатьма" пов'язаними "темами. Погляньте на деякі з них .. ви зможете вивчити все, що вам потрібно.
Мільче Патерн

2
Ви можете взяти короткий курс про переходи css на bradshaw: css3.bradshawenterprises.com
Milche Patern

82
Не ображайтесь, якщо він хоче моргати своїм текстом, він хоче моргати своїм текстом. Не має значення, який це рік. Найінноваційніші люди у світі - це ті, хто не живе за правилами. Зовсім навпаки, вони зазвичай їх ламають і далі, кожен їх копіює. Я думаю, що Apple - прекрасний приклад. Так само з Mackie і т. Д. Я б почував себе краще, якби люди просто дотримувались своєї думки і просто відповідали на питання :-) Як сказано, не ображайтесь. Звучить трохи різко, але я не хочу провокувати, щоб нікого не образити. Немає образ. ;-)
Лоуренс

2
Можливий дублікат
Імітації блимаючого

Можливий дублікат використання CSS для
зменшення

Відповіді:


658

Ви спочатку налаштовуєте, opacity: 1;а потім закінчуєте його 0, тож воно починається з 0%кінця і закінчується 100%, тож замість цього просто встановіть непрозорість 0у, 50%а решта подбає про себе.

Демо

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="blink_me">BLINK ME</div>

Тут я встановлюю тривалість анімації , щоб бути 1 second, а потім я встановлюю timingв linear. Це означає, що він буде постійним протягом усього часу. Останнє я використовую infinite. Це означає, що це буде продовжуватись і продовжуватись.

Примітка: Якщо це не працює для вас, використовуйте браузер префікси подобається -webkit, -mozі так далі по мірі необхідності для animationі @keyframes. Ви можете посилатися на мій детальний код тут


Як зазначається, це не працюватиме на старих версіях Internet Explorer, і для цього вам потрібно використовувати jQuery або JavaScript ...

(function blink() {
  $('.blink_me').fadeOut(500).fadeIn(500, blink);
})();

Дякуємо Alnitak за пропозицію кращого підходу .

Демо (мерехтіння за допомогою jQuery)


7
Щойно зауважив, що це, застосовано до одного текстового елемента, споживає смішну кількість процесора на моєму комп’ютері за допомогою firefox. Остерігайся.
Олексій

2
найкраща відповідь за те, що
найлегше

4
@ Mr.Alien немає синхронізації між ними - зникнення триватиме трохи більше часу, ніж таймер (а таймери все одно не надійні), і в кінцевому підсумку ви, швидше за все, опинитеся без обмеженої черги анімацій, що стоять у черзі на елементі. Правильним підходом було б обійтися без таймера та "рекурсивно" виклику blinkerяк зворотного виклику завершення виклику .fadeIn.
Альнітак

3
@ Mr.Alien також все це може бути просто IIFE - цей один рядок буде робити все, включаючи початкове виклик: (function blink() { $('.blink_me').fadeOut(500).fadeIn(500, blink); })();
Alnitak

2
step-endзамість того, linearщо я хотів.
Alex S

71

Використовуйте alternateзначення для animation-direction(і вам не потрібно додавати кефіри таким чином).

alternate

Анімація повинна змінювати напрямок кожного циклу. Під час відтворення в зворотному порядку кроки анімації виконуються назад. Крім того, функції синхронізації також зворотні; наприклад, полегшена анімація замінюється на анімацію з легкістю, коли вона відтворюється в зворотному напрямку. Відлік для визначення, якщо це парне або непарна ітерація, починається з одиниці.

CSS :

.waitingForConnection {
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
@keyframes blinker { to { opacity: 0; } }

Я видалив fromключовий кадр. Якщо він відсутній, він отримується з значення, яке ви встановили для анімованого властивості ( opacityу цьому випадку) для елемента, або якщо ви його не встановили (і у цьому випадку ви цього не зробили), із значення за замовчуванням. (що 1за opacity).

І будь ласка, не використовуйте лише версію WebKit. Додайте також нефіксований. Якщо ви просто хочете написати менше коду, скористайтеся скороченням .


Як змусити його блимати швидше? Зміна 1.7s змінює це.
Алекс Г

1
@AlexG ви можете замінити cubic-bezierчастину на ease-in-outщось інше: cubic-bezier.com
Даніло Барген

+ Один для кубіка-безьє, адже всі цікаві речі нелінійні
Агній Василіяускас

57

Найкращий спосіб отримати чистий блиск "100%, 100% знижка", як старий <blink>, такий:

.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="blink">BLINK</div>


5
Єдине вірне рішення «моргати». А також працює з colorмайном тощо. Інші речі - це обхідні способи або "зникаючі" анімації.
Мартін Шнайдер

15

Крім того, якщо ви не хочете поступового переходу між показом та прихованням (наприклад, миготливий текстовий курсор), ви можете використовувати щось на кшталт:

/* Also use prefixes with @keyframes and animation to support current browsers */
@keyframes blinker {  
  from { visibility: visible }
  to { visibility: hidden }

  /* Alternatively you can do this:  
  0% { visibility: visible; }
  50% { visibility: hidden; }
  100% { visibility: visible; }
  if you don't want to use `alternate` */
}
.cursor {
  animation: blinker steps(1) 500ms infinite alternate;
}

Кожен 1s .cursorпіде від visibleдо hidden.

Якщо анімація CSS не підтримується (наприклад, в деяких версіях Safari), ви можете повернутися до цього простого інтервалу JS:

(function(){
  var show = 'visible'; // state var toggled by interval
  var time = 500; // milliseconds between each interval

  setInterval(function() {
    // Toggle our visible state on each interval
    show = (show === 'hidden') ? 'visible' : 'hidden';

    // Get the cursor elements
    var cursors = document.getElementsByClassName('cursor');
    // We could do this outside the interval callback,
    // but then it wouldn't be kept in sync with the DOM

    // Loop through the cursor elements and update them to the current state
    for (var i = 0; i < cursors.length; i++) {
      cursors[i].style.visibility = show;
    }
  }, time);
})()

Цей простий JavaScript насправді дуже швидкий і в багатьох випадках може бути навіть кращим за замовчуванням, ніж CSS. Варто зазначити, що багато DOM-дзвінків роблять JS-анімацію повільною (наприклад, $ .animate (.) JQuery).

Це також має другу перевагу: якщо ви додасте .cursorелементи пізніше, вони все одно будуть анімувати рівно в той же час, що й інші .cursor, оскільки стан спільного доступу, це неможливо з CSS, наскільки я знаю.


Це добре працює, ВКЛЮЧЕНО для iOS Safari. Будь-які ідеї, як змусити це працювати над Safari?
Джо Орост

@JoeOrost Я включив альтернативу JS для браузерів, які не підтримують анімацію CSS. На мою думку, це взагалі може бути краще рішення!
MattSturgeon

14

Я не знаю чому, але анімація лише visibilityвласності не працює в жодному браузері.

Що ви можете зробити, це анімувати opacityвластивість таким чином, що у веб-переглядача не вистачає кадрів, щоб вимкнути або вимкнути текст.

Приклад:

span {
  opacity: 0;
  animation: blinking 1s linear infinite;
}

@keyframes blinking {
  from,
  49.9% {
    opacity: 0;
  }
  50%,
  to {
    opacity: 1;
  }
}
<span>I'm blinking text</span>


2
Це нерозумно - просто використовуй step-start(див. Мою відповідь).
Timmmm

Ідеально, саме те, що я шукав. Пальці вгору.
Самуель Рамзан

9

Змініть тривалість і непрозорість відповідно до.

.blink_text { 
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 3s;
    animation-timing-function: linear; 
    animation-iteration-count: infinite; color: red; 
} 

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
}

@-webkit-keyframes blinker { 
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
} 

@keyframes blinker { 
    0% { opacity: 1.0; } 
    50% { opacity: 0.3; } 
    100% { opacity: 1.0; } 
}

9
@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}


4

Пізно, але хотіли додати нову з більшою кількістю кадрів ... ось приклад CodePen, оскільки виникла проблема із вбудованими фрагментами коду:

.block{
  display:inline-block;
  padding:30px 50px;
  background:#000;
}
.flash-me {
  color:#fff;
  font-size:40px;
  -webkit-animation: flash linear 1.7s infinite;
  animation: flash linear 1.7s infinite;
}

@-webkit-keyframes flash {
  0% { opacity: 0; } 
  80% { opacity: 1; color:#fff; } 
  83% { opacity: 0; color:#fff; } 
  86% { opacity: 1; color:#fff;}  
  89% { opacity: 0} 
  92% { opacity: 1; color:#fff;} 
  95% { opacity: 0; color:#fff;}
  100% { opacity: 1; color:#fff;}
}
@keyframes flash {
  0% { opacity: 0; } 
  80% { opacity: 1; color:#fff; } 
  83% { opacity: 0; color:#fff; } 
  86% { opacity: 1; color:#fff;}  
  89% { opacity: 0} 
  92% { opacity: 1; color:#fff;} 
  95% { opacity: 0; color:#fff;}
  100% { opacity: 1; color:#fff;}
}
<span class="block">
  <span class="flash-me">Flash Me Hard</span>
</span>


0
<style>
    .class1{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:#2a9fd4;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:45px;
    }
     .class2{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:green;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:65px;
    }
</style>
<script src="jquery-3.js"></script>
<script>
    $(document).ready(function () {
        $('#div1').addClass('class1');
        var flag = true;

        function blink() {
            if(flag)
            {
                $("#div1").addClass('class2');
                flag = false;
            }
            else
            { 
                if ($('#div1').hasClass('class2'))
                    $('#div1').removeClass('class2').addClass('class1');
                flag = true;
            }
        }
        window.setInterval(blink, 1000);
    });
</script>

0

Це працює для мене, використовуючи class = blink для відповідних елементів

Простий код JS

// Blink
      setInterval(function()
        {

        setTimeout(function()
        {

        //$(".blink").css("color","rgba(0,0,0,0.1)"); // If you want simply black/white blink of text
        $(".blink").css("visibility","hidden"); // This is for Visibility of the element  


        },900);


        //$(".blink").css("color","rgba(0,0,0,1)");  // If you want simply black/white blink of text
        $(".blink").css("visibility","visible");  // This is for Visibility of the element

        },1000);
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.