Can i animated or transform a shadow-CodePudding

i want to ask something. Can i add animation style on shadow with css. The animation what i mean is the shadow can do fade in and fade out in several time.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

CodePudding user response：

Yes you can. You could use @keyframes.

h1 {
  animation: shadow-animate 3s infinite ease;
}

@keyframes shadow-animate {
  0% {
    text-shadow: 20px 20px;
  }
  
  100% {
    text-shadow: 0px 0px
  }
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>