CSS Animation

Question 1

What’s the difference between animation properties and @keyframes?

Answer 1

animation properties control how the animation should behave and the @keyframes rule controls what happens during that animation.

Question 2

animation-name

Answer 2

animation property that sets the name of the animation, which is later used by @keyframes to tell CSS which rules go with which animations.

Question 3

animation-duration

Answer 3

animation property that sets the length of time for the animation.

Question 4

how many animation properties?

Answer 4

eight
animation-name
animation-duration

Question 5

animation-fill-mode: forwards;

Answer 5

The animation-fill-mode specifies the style applied to an element when the animation has finished.

So if you have a button that changes background-color on hover, setting the animation-fil-mode: forwards; will have the button retain the background color it changed to once the animation is complete.

Question 6

Animating elements with a specified position, like fixed or relative,

Answer 6

When elements have a specified position, fixed/relative, the CSS offset properties right, left, top, and bottom can be used in animation rules to create movement.

Question 7

@keyframes

animation-iteration-count

Answer 7

allows you to control how many times you would like to loop through the animation. =)

Question 8

@keyframes twinkle-1 {
    50% {
      transform: scale(0.5);
      opacity: 0.5;
    }
  }

  @keyframes twinkle-2 {
    20% {
      transform: scale(0.5);
      opacity: 0.5;
    }
  }

Answer 8

Notice that how if you set the rate different between two similar animations you can get a twinkling effect.

https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/animate-elements-at-variable-rates

Question 9

Another cool way to vary animations, in addition to manipulating the percentages in the @keyframes settings, is to set different lengths of time for animation-duration properties.

Answer 9

.star-1 {
    margin-top: 15%;
    margin-left: 60%;
    animation-duration: 1s;
    animation-name: twinkle;
  }

  .star-2 {
    margin-top: 25%;
    margin-left: 25%;
    animation-duration: .9s;
    animation-name: twinkle;
  }

  .star-3 {
    margin-top: 10%;
    margin-left: 50%;
    animation-duration: 1.1s;
    animation-name: twinkle;
  }

Question 10

The animation-timing-function property controls how quickly an animated element changes over the duration of the animation.

Answer 10

If the animation is a car moving from point A to point B in a given time (your animation-duration), the animation-timing-function says how the car accelerates and decelerates over the course of the drive.

The rate at which the animation changes over the duration of the entire animation. Balls dropping example if you remember.

Question 11

animation-timing-function s

Answer 11

ease
ease-out
ease-in
linear