Long description

The graph labeled “open angle brace p class equals open double quotes animated close double quotes close angle brace Animate Me open angle brace forward slash p close angle brace is placed at the top of the figure. The horizontal axis has the markings 0 percent, 30 percent, 50 percent, 70 percent, and 100 percent. A tab below the graph has a few values corresponding to the markings on the horizontal axis and is as follows: 0 sec, 0.6 sec, 1 sec, 1.4 sec, and 2 sec. Seven instances of Animate Me is shown on the graph. The first instance is shown at a point close to the horizontal axis approximately at 0.2 percent and is shaded in light lavender. The second instance is shown at a point slightly above the first instance, approximately at 10 percent and is shaded in lavender. The third instance is shown at a point slightly above the second instance, approximately at 20 percent and is shaded in dark lavender. The fourth instance is shown at a point slightly above the third instance, approximately at 30 percent and is shaded in dark red. The fifth instance is shown at a point slightly above the fourth instance, approximately at 55 percent and is shaded in bright red. The sixth instance is shown at a point slightly below the fifth instance at the same horizontal level as the fourth instance, approximately at 75 percent and is shaded in brown. The seventh instance is shown at a point slightly below the sixth instance at the same horizontal level as the third instance, approximately at 90 percent and is shaded in dark green. Eleven lines of C S S code along with comments are placed below the graph. Line 1: dot animated open curly brace. Line 2: animation-iteration hyphen count: infinite semicolon. Comment for line 2: Run animation indefinitely. Line 3: animation hyphen name: bounceIn semicolon. Comment for line 3: Play animation named bounceIn. Line 4: animation hyphen play hyphen state colon running semicolon. Comment for line 4: Play animation once it is defined. Line 5: animation hyphen duration colon 2 s semicolon. Comment for line 5: Animation lasts 2 seconds. Line 6: animation hyphen timing hyphen function colon ease hyphen out semicolon. Comment for line 6: Slow animation toward the end. Line 7: animation hyphen delay colon 1 s semicolon. Comment for line 7: Wait a second before starting animation. Line 8: Close curly brace. Line 9: dot animated colon hover open curly brace. Line 10: animation hyphen play hyphen state colon paused semicolon. Comment for line 10: Pause the animation by hovering over it. (useful for debugging). Line 11: close curly brace.