CSS Animations & Transitions Flashcards For Beginners

Animations are typically used for more complex and interactive effects, while transitions are typically used for simpler and more subtle effects. However, both animations and transitions can be used in a variety of ways to enhance the user experience on a website.

The animation-fill-mode property is used to specify how an element should be styled before and after an animation is applied. Here is an example code for an animation-fill-mode:

/* Apply an animation with a fill mode */
div {
animation-name: example;
animation-duration: 2s;
animation-fill-mode: forwards;
}

/* Define the keyframe animation */
@keyframes example {
from {transform: scale(1);}
to {transform: scale(2);}
}

The scale property is used to increase or decrease the size of an element. Here is an example code for a scale:

/* Increase the size of an element */
div {
  transform: scale(2);
}

The animation-delay property is used to specify the length of time before an animation begins. Here is an example code for an animation-delay:

/* Apply an animation with a delay */
div {
animation-name: example;
animation-delay: 2s;
}

/* Define the keyframe animation */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

The transition-property property is used to specify which CSS properties should be transitioned. Here is an example code for a transition-property:

/* Apply a transition to the background color and font size */
button {
transition-property: background-color, font-size;
}

The transition-delay property is used to specify the length of time before a transition begins. Here is an example code for a transition-delay:

/* Apply a transition with a delay of 1 second */
button {
  transition: background-color 0.5s ease 1s;
}

The perspective property is used to create a 3D effect on an element by defining the distance between the element and the user. Here is an example code for a perspective:

/* Create a 3D effect */
div {
  transform: perspective(100px) rotateY(45deg);
}

CSS transitions are used to create smooth and gradual changes to an element's style. They can be used to add subtle visual effects to a website, such as changing the color of a button on hover. Here is an example code for a transition:

/* Apply a transition to an element */
button {
  transition: background-color 0.5s ease;
}

/* Change the background color on hover */
button:hover {
  background-color: #4CAF50;
}

The translate property is used to move an element in the x and/or y direction. Here is an example code for a translate:

/* Move an element to the right */
div {
  transform: translateX(50px);
}

The animation-name property is used to specify the name of the keyframe animation that should be applied to an element. Here is an example code for an animation-name:

/* Apply an animation */
div {
  animation-name: example;
}

/* Define the keyframe animation */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

The animation-iteration-count property is used to specify how many times an animation should repeat. Here is an example code for an animation-iteration-count:

/* Apply an animation that repeats */
div {
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
}
/* Define the keyframe animation */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

The animation-timing-function property is used to specify the speed of an animation. Here is an example code for an animation-timing-function:

/* Apply an animation with a different timing function */
div {
animation-name: example;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
/* Define the keyframe animation */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

The transition property can also be used to transition transforms. Here is an example code for a transition of transforms:

/* Apply a transition to a transform */
button {
  transition: transform 0.5s ease;
}

button:hover {
  transform: scale(1.2);
}

The transition shorthand property is used to apply all transition properties at once. Here is an example code for a transition shorthand:

/* Apply all transition properties */
button {
  transition: all 0.5s ease;
}

The animation-play-state property is used to pause or resume an animation. Here is an example code for an animation-play-state:

/* Apply an animation that can be paused */
div {
animation-name: example;
animation-duration: 2s;
animation-play-state: paused;
}
/* Define the keyframe animation */
@keyframes example {
from {transform: scale(1);}
to {transform: scale(2);}
}

The skew property is used to slant an element along the x and/or y axis. Here is an example code for a skew:

/* Skew an element along the x-axis */
div {
  transform: skewX(30deg);
}

Transitions can be triggered by different events, such as hover or focus. Here is an example code for a transition triggered by hover:

/* Apply a transition on hover */
button {
  transition: background-color 0.5s ease;
}

button:hover {
  background-color: #4CAF50;
}

The animation-duration property is used to specify the length of time it takes for an animation to complete. Here is an example code for an animation-duration:

/* Apply an animation */
div {
  animation-name: example;
  animation-duration: 2s;
}

/* Define the keyframe animation */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

The transform property is used to modify an element's appearance using 2D or 3D transformations, such as rotation, scaling, and skewing. Here is an example code for a transform:

/* Rotate an element */
div {
  transform: rotate(45deg);
}

CSS animations are used to create dynamic and engaging web designs. Animations can be used to draw attention to specific elements, provide feedback to users, and make a website more visually interesting. Here is an example code for an animation:

/* Keyframe animation */
@keyframes example {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

/* Apply the animation to an element */
div {
  animation-name: example;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

The animation-direction property is used to specify whether an animation should play forward or backward. Here is an example code for an animation-direction:

/* Apply an animation that plays in reverse */
div {
animation-name: example;
animation-duration: 2s;
animation-direction: reverse;
}

/* Define the keyframe animation */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}