Как сделать мигающий/мигающий текст с помощью CSS 3?

В настоящее время у меня есть этот код:



@-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. Это возможно?

940   9  

9 ответов:

вы первый параметр opacity: 1; и тогда вы заканчиваете его на 0, так что это начинается с 0% и заканчивается 100% поэтому вместо этого просто установите непрозрачность в 0 at 50% а отдых позаботится о себе сам.

демо

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

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

здесь, я устанавливаю продолжительность анимации должна быть 1 second, чем меня задание timing до linear это означает, что он будет постоянным во всем, и последний am используя infinite это означает, что это будет продолжаться и дальше.

Примечание: Если это не работает для вас, используйте префиксы браузера, такие как -webkit,-moz и так далее по мере необходимости для animation и @keyframes. Вы можете обратиться к моему подробному коду здесь

как уже отмечалось, это не будет работать на старых версиях Internet Explorer, для этого вам нужно использовать jQuery или JavaScript....

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

спасибо в Альнитак, предлагая лучше.

демо(мигалка с помощью jQuery)

454  
2018-03-08 07:47:12

использовать alternate значение animation-direction (и вам не нужно добавлять какие-либо keframes таким образом).

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. Добавить незакрепленный один после него, а также. Если вы просто хотите написать меньше кода, используйте коротко.

61  
2016-05-18 21:31:46

лучший способ получить чистый" 100% on, 100% off " мигать, как старый <blink> такой:

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

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="blink">BLINK</div>
18  
2018-03-08 07:44:57

в качестве альтернативы, если вы не хотите постепенного перехода между show и hide (например, мигающий текстовый курсор), вы можете использовать что-то вроде:

/* 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 (например, jQuery $.живой.))(

он также имеет второе преимущество, что если вы добавляете .cursor элементы позже, они будут по-прежнему анимировать в то же время, что и другие .cursors поскольку состояние является общим, это невозможно с CSS, насколько мне известно.

15  
2015-11-13 02:31:47

Я не знаю почему, но анимация только 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>
11  
2017-01-08 12:09:27

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

.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; } 
}
7  
2016-01-12 23:01:40 
@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
6  
2013-05-02 20:41:05

поздно, но хотел добавить новый с большим количеством ключевых кадров ... вот это пример на 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>
1  
2018-08-23 18:25:26 
<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>
-1  
2018-04-11 15:40:51

Comments

    Ничего не найдено.
Click here to cancel reply.