Как сделать мигающий/мигающий текст с помощью 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
. Это возможно?
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
to linear
это означает, что он будет постоянным во всем, и последний am используя infinite
это означает, что это будет продолжаться и продолжаться.
Примечание: Если это не работает для вас, используйте префиксы браузера, такие как
-webkit
,-moz
и так далее по мере необходимости дляanimation
и@keyframes
. Вы можете обратиться к моему подробному коду здесь
как уже отмечалось, это не будет работать на более старых версиях Internet Explorer, для этого вам нужно использовать jQuery или JavaScript....
(function blink() {
$('.blink_me').fadeOut(500).fadeIn(500, blink);
})();
спасибо в Альнитак, предлагая лучше.
демо (мигалка с помощью jQuery)
использовать 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. Добавить и после него тоже. Если вы просто хотите написать меньше кода, используйте коротко.
лучший способ получить чистый" 100% on, 100% off " мигает, как старый <blink>
такой:
.blink {
animation: blinker 1s step-start infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
<div class="blink">BLINK</div>
альтернативно, если вы не хотите постепенного перехода между 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
элементы позже, они все равно будут анимироваться точно в то же время, что и другие .cursor
s поскольку состояние является общим, это невозможно с CSS, насколько мне известно.
Я не знаю почему, но анимация только 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>
изменить продолжительность и непрозрачность в соответствии.
.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; }
}
поздно, но хотел добавить новый с большим количеством ключевых кадров ... вот это пример на 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>
<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>