Animation How to - Create Blink red dot with animation








Question

We would like to know how to create Blink red dot with animation.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
@keyframes up-right {
    0% {<!--from w w w .  j  a va 2  s. c  o m-->
        transform: scale(1);
        opacity: .25
    }
    50% {
        transform: scale (1, 5);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: .25;
    }
}
.circle {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    opacity: .25;
}
.red {
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-animation: up-right 1s infinite;
    -moz-animation: up-right 1s infinite;
    -o-animation: up-right 1s infinite;
    animation: up-right 1s infinite;
}
</style>
</head>
<body>
  <div class="circle red"></div>
</body>
</html>

The code above is rendered as follows: