chore(curriculum): add css animations transcripts (freeCodeCamp#58375)

curriculum/challenges/english/25-front-end-development/lecture-animations-and-accessibility/672aa8d65995be62ef1c7515.md

@@ -10,6 +10,107 @@ dashedName: what-are-css-animations
 
 Watch the video lecture and answer the questions below.
 
+# --transcript--
+
+What are CSS animations, and how do they work?
+
+CSS animations allow you to create dynamic, visually engaging effects on web pages without the need for JavaScript or complex programming. They provide a way to smoothly transition elements between different styles over a specified duration.
+
+At its core, a CSS animation consists of two main components: the `@keyframes` rule and the animation property.
+
+The `@keyframes` rule defines the stages and styles of the animation. It specifies what styles the element should have at various points during the animation. 
+
+Here's an example:
+
+```css
+@keyframes slide-in {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+```
+
+This `@keyframes` rule, named `slide-in`, defines an animation that moves an element from left to right. The percentages represent the progress of the animation, with `0%` being the start and `100%` being the end.
+
+The `translateX` function in your `@keyframes` animation is controlling the horizontal position of an element as it animates into view.
+
+To apply this animation to an element, you use the `animation` property:
+
+```css
+.sliding-element {
+  animation: slide-in 2s ease-out;
+}
+```
+
+This applies the `slide-in` animation to the element with a duration of 2 seconds and an `ease-out` timing function.
+
+The `animation` property is actually a shorthand for several individual properties:
+
+`animation-name` which specifies the `@keyframes` rule to use.
+
+`animation-duration` which sets how long the animation should take to complete.
+
+`animation-timing-function` which defines how the animation progresses over time - such as `ease`, `linear`, `ease-in-out`.
+
+`animation-delay` which specifies a delay before the animation starts.
+
+`animation-iteration-count` which sets how many times the animation should repeat.
+
+`animation-direction` which determines whether the animation should play forwards, backwards, or alternate.
+
+`animation-fill-mode` which specifies how the element should be styled before and after the animation.
+
+`animation-play-state` which allows you to pause and resume the animation.
+
+You can use these properties individually for more precise control:
+
+```css
+.complex-animation {
+  animation-name: color-change;
+  animation-duration: 3s;
+  animation-timing-function: linear;
+  animation-delay: 1s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+@keyframes color-change {
+  0% {
+    background-color: red;
+  }
+  50% {
+    background-color: blue;
+  }
+  100% {
+    background-color: green;
+  }
+}
+```
+
+This creates an animation that continuously transitions an element's background color between red, blue, and green.
+
+CSS animations can be triggered by various events, such as hovering over an element:
+
+```css
+.button {
+  background-color: blue;
+  transition: background-color 0.3s;
+}
+
+.button:hover {
+  background-color: red;
+}
+```
+
+While this example uses the `transition` property, which is simpler for basic effects, it demonstrates how CSS can create interactive, animated elements.
+
+It's important to note that while CSS animations are powerful, they should be used in moderation. Overuse of animations can lead to poor performance and may be distracting or problematic for users with certain accessibility needs. Always consider providing options to reduce or disable animations for users who prefer less motion.
+
+CSS animations offer a way to create engaging, interactive web experiences without relying on JavaScript. By understanding the principles of `@keyframes` and `animation` properties, you can bring your web designs to life in a performant and accessible manner.
+
 # --questions--
 
 ## --text--

curriculum/challenges/english/25-front-end-development/lecture-animations-and-accessibility/672cf764cf55a70433590def.md

@@ -10,6 +10,71 @@ dashedName: what-are-accessibility-concerns-around-using-animations
 
 Watch the lecture video and answer the questions below.
 
+# --transcript--
+
+What are accessibility concerns around using animations, and how can `prefers-reduced-motion` help?
+
+Animations can greatly enhance the visual appeal and user experience of a website. However, they can also pose significant accessibility challenges for certain users. It's crucial to understand these concerns and implement solutions to ensure your website remains accessible to all users.
+
+One of the primary accessibility concerns with animations is that they can cause discomfort or even physical harm to some users. People with vestibular disorders or motion sensitivity may experience dizziness, nausea, or headaches when exposed to certain types of movement on screen.
+
+Additionally, animations can be distracting for users with cognitive disabilities or attention disorders. Rapid flashing or strobing effects are particularly problematic. They can trigger seizures in people with photosensitive epilepsy. As a general rule, avoid any content that flashes more than three times per second.
+
+Another issue is that animations can make it difficult for some users to focus on or read content. This is especially true for users with low vision or reading difficulties who may struggle to track moving text or shifting layouts.
+
+To address these concerns, CSS provides the `prefers-reduced-motion` media query. This feature allows web developers to detect if the user has requested minimal animations or motion effects at the system level.
+
+Here's how you can use `prefers-reduced-motion`:
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+```
+
+This CSS code snippet effectively disables most animations and transitions for users who have indicated a preference for reduced motion. Let's break it down:
+
+The `@media` query rule checks if the user prefers reduced motion. If true, it applies the enclosed styles.
+
+Inside the media query, we're targeting all elements (`*`) and overriding animation and transition properties.
+
+We set `animation-duration` and `transition-duration` to an extremely small value (`0.01ms`). This essentially turns off the animations while still allowing them to complete, which can be important for certain functionality.
+
+`animation-iteration-count: 1` ensures that any looping animations only play once.
+
+`scroll-behavior: auto` disables smooth scrolling effects.
+
+The `!important` declaration is used to ensure these rules take precedence over other animation styles.
+
+It's important to note that while this method effectively reduces motion, it's a blanket approach. For more precise control, you might want to define specific reduced-motion alternatives for your animations.
+
+Here's an example of a more targeted approach:
+
+```css
+.animated-element {
+  transition: transform 0.3s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animated-element {
+    transition: none;
+  }
+}
+```
+
+In this case, we're only disabling the `transition` for a specific element when reduced motion is preferred. This allows you to provide alternative, less motion-intensive experiences for users who need them.
+
+Remember, the goal is not to completely remove all motion from your site, but to provide options that allow all users to comfortably interact with your content. Some motion can still be beneficial for usability and feedback, even for users who prefer reduced motion.
+
+When implementing animations, consider using them thoughtfully rather than just for decoration. Avoid large, unexpected movements and provide controls to pause, stop, or hide animations when possible. Importantly, use the `prefers-reduced-motion` query to offer a low-motion alternative, ensuring your content remains accessible and comfortable for all users, including those sensitive to motion.
+
+By being mindful of these accessibility concerns and utilizing tools like `prefers-reduced-motion`, you can create engaging, animated experiences that are inclusive and accessible to all users.
+
 # --questions--
 
 ## --text--