CSS Animation

User Story

The user sees the roulette game, and only after clicking the start button, the API call is made to retrieve prize information. Once the prize data is obtained and the roulette is spun to the designated position, the winning information will be displayed.

Keyframes

CSS animations are created using keyframes. Keyframes define the styles at various points in the animation timeline, allowing for smooth transitions between them.

1
2
3
4
5
6
7
8

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

1. from / to = 0% / 100%
2. Automatic calculation if no start or end is specified
3. Use percentage with numbers

Animation Properties

To apply keyframes to an element, you’ll use the animation property. This property specifies the animation name, duration, timing function, iteration count and fill mode.

Animation Name

The name of the keyframe animation you want to apply.

• case sensitive
• with or without quote
• reserved word initial, None is illegal for naming, but could be 'None'

1
2
3
4
5
6
7

.element {
  animation-name: rotate;
}

.element {
  animation-name: "initial";
}

Animation Duration

The total time taken for the animation to complete one cycle (specified in seconds or milliseconds).

• default set to 0

1
2
3

.element {
  animation-duration: 5s;
}

Animation Timing Function

Specifies the speed curve of the animation. Common values include ease, linear, ease-in, ease-out, and ease-in-out.

• default set to ease
• cubic-bezier()

1
2
3

.element {
  animation-timing-function: ease-out;
}

Animation Delay

The time to wait before starting the animation (specified in seconds or milliseconds).

• default set to 0

1
2
3

.element {
  animation-delay: 500ms;
}

Animation Iteration Count

Specifies the number of times the animation should run. Use a finite number or infinite for continuous animation.

• default set to 1

1
2
3

.element {
  animation-iteration-count: infinite; /* Runs the animation infinite times */
}

Animation Fill Mode

Describes how an element’s style is applied before and after the animation. Common values includenone, forwards, backwards, both.

• default set to none

1
2
3

.element {
  animation-fill-mode: forwards;
}

Putting it all together:

1
2
3
4

/* @keyframes duration | easing-function | iteration-count | fill-mode | name */
.element {
  animation: 5s ease-out 500ms infinite forwards rotate;
}

This example combines various parameters to create an animation named rotate with a duration of 5 second, easing out, a delay of 500 milliseconds, running infinite times, and pausing the animation in the end.

Animation Event

• animationstart
• animationend
• animationiteration
• animationcancel

Difficulties

• rotate to certain position
• smooth animation
  • rate
  • position

More Info

• Animate.style
• Animation examples

Conclusion

• strong
• interesting
• start and try

References

• Animation-W3C
• Animation-MDN