animation-name Archives

The CSS animation-name property defines a name for the @keyframes animation.

Syntax:

animation-name: keyframe name|none;

name – defines the name of the keyframe you want to bind to the selector.

none (default) – defines that there will be no animation.

Example:

Defines a name for the @keyframes animation:

<!DOCTYPE html>
<html>
<head>
<style>

.square-1 {
  width: 100px;
  height: 100px;
  margin: 5px;
  background: #2a9d8f;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation-name: move;
  animation-duration: 4s;
}    
@keyframes move {
  from {left: 0px;}
  to {left: 250px;}
}
</style>
</head>
<body>

<div class="square-1">1</div>

</body>
</html>

Output:

Click on the square to repeat the animation.

Enjoy coding!