ℹ️ Select 'Choose Exercise', or randomize 'Next Random Exercise' in selected language.

Choose Exercise:
Timer 00:00
WPM --
Score --
Acc --
Correct chars --

CSS Animation Keyframes and Timing

CSS

Goal -- WPM

Ready
Exercise Algorithm Area
1/*

2This CSS snippet demonstrates advanced CSS animations using @keyframes.

3It allows for complex, multi-step visual effects.

4*/

5

6/* Define the animation sequence */

7@keyframes complexPulse {

80% {

9transform: scale(1);

10opacity: 1;

11background-color: #4CAF50; /* Green */

12}

1325% {

14transform: scale(1.1);

15opacity: 0.8;

16background-color: #2196F3; /* Blue */

17}

1850% {

19transform: scale(1.05);

20opacity: 0.9;

21background-color: #ff9800; /* Orange */

22}

2375% {

24transform: scale(1.15);

25opacity: 0.7;

26background-color: #f44336; /* Red */

27}

28100% {

29transform: scale(1);

30opacity: 1;

31background-color: #4CAF50; /* Back to Green */

32}

33}

34

35/* Apply the animation to an element */

36.animated-element {

37width: 100px;

38height: 100px;

39background-color: #4CAF50;

40margin: 50px auto;

41border-radius: 10px;

42box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

43

44/* Animation properties */

45animation-name: complexPulse;

46animation-duration: 5s;

47animation-timing-function: ease-in-out;

48animation-delay: 0s;

49animation-iteration-count: infinite;

50animation-direction: normal;

51animation-fill-mode: forwards;

52animation-play-state: running;

53}

54

55/* Another animation example: Slide and Fade */

56@keyframes slideFadeIn {

57from {

58transform: translateX(-100%);

59opacity: 0;

60}

61to {

62transform: translateX(0);

63opacity: 1;

64}

65}

66

67.slide-fade-element {

68width: 150px;

69height: 80px;

70background-color: #00bcd4;

71margin: 30px;

72border-radius: 5px;

73

74/* Apply animation */

75animation-name: slideFadeIn;

76animation-duration: 1.5s;

77animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

78animation-iteration-count: 1;

79animation-fill-mode: backwards;

80}

81

82/* Edge case: Animation on a hidden element */

83.hidden-element {

84width: 50px;

85height: 50px;

86background-color: purple;

87margin: 20px;

88animation-name: complexPulse;

89animation-duration: 3s;

90animation-iteration-count: 1;

91animation-fill-mode: none;

92visibility: hidden;

93}

94

95/* To trigger animation on hidden element, it needs to be visible at some point. */

96/* For example, if it becomes visible after a delay or interaction. */

97/* This example shows a delayed reveal and then animation. */

98.delayed-reveal-container {

99position: relative;

100width: 100px;

101height: 100px;

102margin: 50px auto;

103perspective: 1000px;

104}

105

106.delayed-reveal-element {

107position: absolute;

108width: 100%;

109height: 100%;

110background-color: #ff5722;

111border-radius: 8px;

112transform-style: preserve-3d;

113animation: flipIn 2s forwards;

114}

115

116@keyframes flipIn {

1170% {

118transform: rotateY(90deg);

119opacity: 0;

120}

12150% {

122transform: rotateY(0deg);

123opacity: 1;

124}

125100% {

126transform: rotateY(0deg);

127opacity: 1;

128}

129}
Algorithm description viewbox

CSS Animation Keyframes and Timing

Algorithm description:

This CSS code defines and applies complex animations using the `@keyframes` rule and various animation properties. It demonstrates how to create sequences of visual changes over time, including transformations, opacity changes, and color transitions. This is powerful for adding dynamic effects, engaging user interfaces, and visual storytelling in web development. The code includes multiple animation examples and addresses edge cases like animating hidden elements.

Algorithm explanation:

CSS animations are controlled by `@keyframes` rules, which define the styles an element should have at specific points in time (percentages or `from`/`to`). The `animation-name` property links an element to a `@keyframes` rule. `animation-duration` sets how long the animation takes. `animation-timing-function` controls the speed curve (e.g., `ease`, `linear`, `ease-in-out`, `cubic-bezier`). `animation-iteration-count` determines how many times the animation repeats (`infinite` for endless). `animation-delay` pauses before starting. `animation-direction` controls playback direction (`normal`, `reverse`, `alternate`). `animation-fill-mode` dictates styles before and after animation (`forwards` keeps the end state). `animation-play-state` can pause/resume. Edge cases include animating elements that are initially hidden (`visibility: hidden;`) or off-screen, requiring careful consideration of `animation-fill-mode` and element visibility changes to ensure the animation is rendered correctly when the element becomes visible.

Pseudocode:

1. Define `@keyframes` rule with a name.
2. Specify keyframes using percentages (0% to 100%) or `from`/`to`.
3. At each keyframe, define the desired CSS properties (e.g., `transform`, `opacity`, `background-color`).
4. Apply the animation to an element using `animation-name`.
5. Set `animation-duration` for the total time.
6. Choose an `animation-timing-function` for the speed curve.
7. Configure `animation-iteration-count`, `animation-delay`, `animation-direction`, and `animation-fill-mode` as needed.
8. Consider `animation-play-state` for control.
9. Handle edge cases like animating hidden elements by ensuring they become visible during the animation's active period.