В настоящее время у меня есть этот код:
@-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. Это возможно?
Сначала вы устанавливаете 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>Используйте 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. Добавьте без префикса после него. Если вы просто хотите написать меньше кода, используйте сокращенную версию.
Лучший способ получить чистое мигание "100% включено, 100% скидка", как старый <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 $.animate()).
Кроме того, второе преимущество заключается в том, что если вы добавите элементы .cursor позже, они будут по-прежнему анимироваться точно в то же время, что и другие .cursor, поскольку состояние является общим, это невозможно с 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>@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
Изменить продолжительность и непрозрачность.
.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>
Это работает для меня, используя 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);