CSS Properties: How to specify the direction of an animation takes to complete?

Last update on February 15 2024 10:04:53 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><!-- Declare character encoding -->
<title>How to specify the direction of an animation takes to complete</title><!-- Set the title of the HTML document -->
</head>
<body>
<div class="animation"><!-- Container for the animated element -->
<div class="w3r"><!-- Division element for text content -->
w3resource Tutorial
</div>
</div>
<style type="text/css"> /* CSS style start*/
.w3r {
  color: white; /* Set text color to white */
  float: left; /* Float the element to the left */
  margin-right: 2%; /* Set right margin to 2% */
  font-size: 20px /* Set font size to 20 pixels */
}

.animation {
  background-color: #CC3333; /* Set background color */
  height: 50px; /* Set height */
  width: 100%; /* Set width to 100% */
  overflow: hidden; /* Hide overflow */
}

div {
    width: 100px; /* Set width of the animated element */
    height: 100px; /* Set height of the animated element */
    background: #33FFFF; /* Set background color */
    position: relative; /* Set position property to relative */
    -webkit-animation: move 5s infinite; /* Chrome, Safari, Opera */ /* Apply animation to the element for Webkit browsers */
    -webkit-animation-delay: 5s; /* Chrome, Safari, Opera */ /* Delay the start of the animation for Webkit browsers */
    animation: move 5s infinite; /* Apply animation to the element */
    animation-direction: alternate, reverse, normal; /* Set animation direction */
}

/* Chrome, Safari, Opera */
@-webkit-keyframes move { /* Define keyframes for the animation in Webkit browsers */
    0%   {background: #FF0000; left: 0px; top: 0px;} /* Set initial state */
    25%  {background: #FFFF00; left: 200px; top: 0px;} /* Set state at 25% of animation */
    50%  {background: #3333CC; left: 200px; top: 200px;} /* Set state at 50% of animation */
    75%  {background: #009900; left: 0px; top: 200px;} /* Set state at 75% of animation */
    100% {background: #FF0000; left: 0px; top: 0px;} /* Set final state */
}

@keyframes move { /* Define keyframes for the animation */
    0%   {background: #FF0000; left: 0px; top: 0px;} /* Set initial state */
    25%  {background: #FFFF00; left: 200px; top: 0px;} /* Set state at 25% of animation */
    50%  {background: #3333CC; left: 200px; top: 200px;} /* Set state at 50% of animation */
    75%  {background: #009900; left: 0px; top: 200px;} /* Set state at 75% of animation */
    100% {background: #FF0000; left: 0px; top: 0px;} /* Set final state */
}
</style>
</body>
</html>

Explanation:

The HTML document contains a container div with a class of "animation" and a child div with a class of "w3r" for text content.
CSS is used to style the elements, setting their colors, sizes, and positioning.
Animation is applied to the div elements using keyframes (@keyframes move) to define the animation behavior.
The animation-direction property is used to specify the direction of the animation. The value "alternate" makes the animation reverse direction on every cycle, "reverse" makes the animation play in reverse, and "normal" makes it play in the default direction.

Live Demo:

See the Pen animation-direction-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page