1

Добрый день! Есть такая анимация на css:

.online {
  display: block;
	position: relative;
	width: 8px;
	height: 8px;
	border: 1px solid green;
	background: green;
	-webkit-animation: online 2s steps(5, start) infinite;
	-moz-animation: online 2s steps(5, start) infinite;
	animation: online 2s steps(5, start) infinite;
}
@-webkit-keyframes online { to { visibility: hidden; } }
@-moz-keyframes online { to { visibility: hidden; } }
@keyframes online { to { visibility: hidden; } }
<div class="online"></div>

А реально ли сделать с помощью css такую анимацию? Если да, то помогите, пожалуйста. Спасибо!

введите сюда описание изображения

2
  • Ну всё то же самое, только с background
    – andreymal
    31 мая 2017 в 10:44
  • Вижу разницу лишь в интервалах между кадрами, вы про это? Это тоже настраивается в @keyframes
    – andreymal
    31 мая 2017 в 10:52

3 ответа 3

3

(Почему-то у меня сильно проще чем у соседних ответов)

https://webref.ru/css/keyframes

@keyframes online {
  0% { background-color: #6cbe44; }
  57.1% { background-color: white; }
  71.4% { background-color: #6cbe44; }
  85.7% { background-color: white; }
}

.online {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 1px solid #44b64c;
    background-color: #6cbe44;
    animation: online 1.4s step-end infinite;
}
<div class="online"></div> - CSS<br/>
<img src="https://i.stack.imgur.com/AXzQC.gif" alt="" /> - GIF

1
  • 1
    Не проще, а короче)) Потому что у background'а на цвет не действует плавность анимации и опущены альтернативные теги -moz, -o, -webkit (хотя кому они сейчас в 2017 нужны). В любом случае первый комментарий с ответом Ваш)
    – Alex Krass
    31 мая 2017 в 11:47
2

Да, помимо ключевых слов from и to синтаксис @keyframes включает процентные параметры времени анимации.

.lg-border{
  border: 1px solid LimeGreen;
  width: 10px;
	height: 10px;
}

.online {
  display: block;
	position: relative;
	width: 8px;
	height: 8px;
	border: 1px solid LimeGreen;
	background: LimeGreen;
	-webkit-animation: online 2s steps(5, start) infinite;
	-moz-animation: online 2s steps(5, start) infinite;
	animation: online 2s steps(5, start) infinite;
}
@-webkit-keyframes online { 
  0% { opacity: 1; }
  30% { opacity: 1; }
  33% { opacity: 0; }
  40% { opacity: 0; }
  43% { opacity: 1; }
  50% { opacity: 1; }
  53% { opacity: 0; }
  60% { opacity: 0; }
  63% { opacity: 1; }
}
@-moz-keyframes online { 
  0% { opacity: 1; }
  30% { opacity: 1; }
  33% { opacity: 0; }
  40% { opacity: 0; }
  43% { opacity: 1; }
  50% { opacity: 1; }
  53% { opacity: 0; }
  60% { opacity: 0; }
  63% { opacity: 1; }
}
@keyframes online { 
  0% { opacity: 1; }
  30% { opacity: 1; }
  33% { opacity: 0; }
  40% { opacity: 0; }
  43% { opacity: 1; }
  50% { opacity: 1; }
  53% { opacity: 0; }
  60% { opacity: 0; }
  63% { opacity: 1; }
}
<div class="lg-border">
 <div class="online"></div>
</div>

0
1

.online {
  display: block;
	position: relative;
	width: 8px;
	height: 8px;
	border: 1px solid green;
	background: white;
	-webkit-animation: online 2s steps(5, start) infinite;
	-moz-animation: online 2s steps(5, start) infinite;
	animation: online 2s steps(5, start) infinite;
}
@keyframes online { 
  0% { background: white; } 
  20% { background: white; } 
  21% { background: green; } 
  30% { background: green; } 
  31% { background: white; } 
  40% { background: white; } 
  41% { background: green; } 
  50% { background: green; } 
  51% { background: white; } 
  60% { background: white; } 
  61% { background: green; } 
  70% { background: green; } 
  71% { background: white; } 
}
<div class="online"></div>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.