Реально ли сделать такую анимацию с помощью css?

366

02 июня 2017, 12:24

Добрый день! Есть такая анимация на 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 такую анимацию? Если да, то помогите, пожалуйста. Спасибо!

Answer 1

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

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

Answer 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>

Answer 3

.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>

Создание сайта для доставки еды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не могу собрать QMYSQL под Windows

Знаю, что тема очень избитая, но у меня не получается собрать драйвер MySQL для Qt 58 (MinGW)

586

MySQL

Не создаётся сокет mysql

При загрузке системы ubuntu в папке /var/run не создаётся папка mysqld, и => сокета тоже не создаётсяЯ так понимаю, папка mysqld должна быть в /run тоже, но её там...

225

MySQL

Ошибка “ERROR 2003 (HY000): Can't connect to MySQL server on '' (111)” при удаленном доступе к mysql [требует правки]

При попытке подключения к удаленному MySQL серверу получаю ошибку "ERROR 2003 (HY000): Can't connect to MySQL server on 'ip-сервера' (111)", дело в том, что такая ошибка...

248

MySQL

Вывод дерева mysql

Есть таблица elements следующей структуры Adjacency List Model:

291