<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style>
.mycircle-blink {
width: 8px;
height: 8px;
background: #f83306;
position: relative;
transform: scale(1.0);
animation: blink 2s infinite;
transition-timing-function: linear;
border: solid 3px rgba(255, 165, 0, 0.8);
border-radius: 50%
}
@keyframes motion {
0% {
/* transform: scale(1.5);*/
left:0px; top:0px;
}
25% {
/* transform: scale(1.0);*/
left:25px; top:25px;
}
50% {
/* transform: scale(1.0);*/
left:50px; top:50px;
}
75% {
/* transform: scale(1.0);*/
left:75px; top:75px;
}
100% {
/* transform: scale(1.5);*/
left:0px; top:0px;
}
}
@keyframes blink {
0% {transform: scale(1.0); }
20% {transform: scale(1.5); }
40% {transform: scale(1.0); }
60% {transform: scale(1.5); }
80% {transform: scale(1.2); }
90% {transform: scale(1.3); }
100%{transform: scale(1.1); }
}
</style>
<div class="mycircle-blink"></div>
</body>
</html>
<html>
<head>
<title></title>
</head>
<body>
<style>
.mycircle-blink {
width: 8px;
height: 8px;
background: #f83306;
position: relative;
transform: scale(1.0);
animation: blink 2s infinite;
transition-timing-function: linear;
border: solid 3px rgba(255, 165, 0, 0.8);
border-radius: 50%
}
@keyframes motion {
0% {
/* transform: scale(1.5);*/
left:0px; top:0px;
}
25% {
/* transform: scale(1.0);*/
left:25px; top:25px;
}
50% {
/* transform: scale(1.0);*/
left:50px; top:50px;
}
75% {
/* transform: scale(1.0);*/
left:75px; top:75px;
}
100% {
/* transform: scale(1.5);*/
left:0px; top:0px;
}
}
@keyframes blink {
0% {transform: scale(1.0); }
20% {transform: scale(1.5); }
40% {transform: scale(1.0); }
60% {transform: scale(1.5); }
80% {transform: scale(1.2); }
90% {transform: scale(1.3); }
100%{transform: scale(1.1); }
}
</style>
<div class="mycircle-blink"></div>
</body>
</html>
