Glowing Text Blink Animation

The Animation is a very important part of any website until 2020, as it enhances the user experience and makes it visually appealing. Therefore, consider this importance

I wanted to animated waves for the background of a page. Initially, I tried a staggered loop animation in Javascript, but some mobile devices struggled

Try Coding Yourself with your own customizations

Html File Source code

1. ➤ Add-in <body></body> Tag element :-

h1 {
  font-size: calc(20px + 10vh);
  line-height: calc(20px + 20vh);
 text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
    0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092;
  color: #fccaff;
  /*  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9; */
  font-family:  cursive;
  text-align: center;
  animation: blink 10s infinite;
  -webkit-animation: blink 10s infinite;
}

body {
  padding: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #222;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 7px,
    rgba(0, 0, 0, 0.8) 9px,
    rgba(0, 0, 0, 0.8) 13px,
    transparent 13px
  );
}

@-webkit-keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }

0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {

text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
}
@keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }

0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {

text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
}

Coding Hindi

Glowing Text Blink Animation | HTML CSS Tutorials