AltSchool Of Engineering Tinyuka’24 Month 4 Week 2

This week started with a helpful revision session of the last class (summary here definitely worth a look if you missed it!). After that, we got into enhancing readability, guided by our excellent instructor.

Inline Elements, CSS Transitions, and Timing Functions

Inline Elements

The transform property does not apply to inline elements in a flow layout, as these elements are designed to seamlessly flow with surrounding content. To enable transformations, you can change the element's display property to inline-block or use layout modes like Grid or Flexbox.

CSS Transitions

The transition property is a vital aspect of CSS animations, allowing for smooth transitions between states of an element. This reduces abrupt changes and enhances user experience by making interactions feel more fluid.

For example, consider two circles; when you hover over the red circle, it might scale up smoothly, while the blue circle remains static. This visual difference illustrates how transitions can improve interactivity.

Timing Functions

The transition-timing-function property controls the pacing of transitions, dictating how intermediate values are calculated. Several timing functions are available:

• linear: Transitions occur at a constant speed.

• ease-out: Starts fast and slows down.

• ease-in: Begins slowly and speeds up.

• ease-in-out: Starts and ends slowly, accelerating in the middle.

• ease: Similar to ease-in-out, but not perfectly symmetrical; it’s the default value.

Example:

.circle {

  transition: transform 0.5s ease-in-out;

}



.circle:hover {

  transform: scale(1.2); /* Scales the circle smoothly on hover */

}

Custom Curves

If the built-in timing functions don't meet your needs, you can create custom easing curves using the cubic-bezier function, allowing for more precise control over the transition's speed.

Delays

The transition-delay property specifies how long to wait before initiating a transition effect when a property changes. This is useful for creating a pause before actions occur. For instance, setting transition-delay:500ms means that a hover effect will start after a half-second delay.

Example:

.button {

  transition: background-color 0.3s ease;

  transition-delay: 0.5s; /* Waits 500ms before starting the transition */

}



.button:hover {

  background-color: blue; /* Changes color after the delay */

}

This approach allows for more controlled and engaging interactions on your website.

Keyframe Animations

Keyframe animations are essential for applying transformations that transition an element from one set of CSS styles to another using the @keyframes rule.

Defining Keyframes

When you define a keyframe animation, you give it a name like slide-in which acts like a global variable. This allows you to reuse the animation across different elements. To apply the animation to specific selectors, you use the animation property.

Example:

@keyframes slide-in {

  from {

    transform: translateX(-100%);

  }

  to {

    transform: translateX(0);

  }

}



.element {

  animation: slide-in 1s ease;

}

Looped Animations

By default, keyframe animations run only once. If you want the animation to repeat, you can use the animation-iteration-count property, which accepts:

• infinite: The animation will loop endlessly.

• number: Specifies how many times the animation should repeat.

Example:

.element {

  animation: slide-in 1s ease infinite; /* Repeats forever */

}

Multi-Step Animations

For animations that require more than two steps, you can define keyframes using percentages rather than just from and to.

Example:

@keyframes multi-step {

  0% { transform: scale(1); }

  50% { transform: scale(1.5); }

  100% { transform: scale(1); }

}

Alternating Animations

To create effects like "breathing," where an element inflates and deflates, you can use multiple keyframes.

Example:

@keyframes breathe {

  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.2); }

}

Shorthand Values

The animation shorthand property combines various animation properties, including animation-name, animation-duration, and more, simplifying your code.

Example:

.element {

  animation: slide-in 1s ease forwards; /* Combines multiple properties */

}

Fill Modes

The animation-fill-mode property controls how an element is styled before and after the animation runs. This ensures a smoother transition rather than abrupt changes.

Available values include:

• none: No styles are applied before or after.

• forwards: The element retains the styles from the last keyframe.

• backwards: The element uses the styles from the first keyframe before the animation starts.

• both: Combines the effects of both forwards and backwards.

Example:

.element {

  animation: slide-in 1s ease forwards; /* Retains final styles after animation */

}

This comprehensive approach to keyframe animations enhances the dynamic nature of web designs, providing engaging visual experiences.

Animations vs. Transitions

While both animations and transitions can enhance the visual appeal of elements, they serve different purposes and capabilities.

When to Use Transitions

Transitions are ideal for simple effects, such as smooth hover effects or style changes triggered by user actions. They allow for gradual changes between two states.

Example:

.button {

  transition: background-color 0.3s ease;

}



.button:hover {

  background-color: blue; /* Smooth color change on hover */

}

When to Use @keyframes

On the other hand, @keyframes is essential for more complex animations that cannot be achieved with transitions alone. These include:

• Multi-step animations: Where multiple stages are required.

• Pauseable animations: That can be paused and resumed with JavaScript.

• Animations triggered on page load: Offering greater control over timing and sequence.

Example:

@keyframes complex-animation {

  0% { transform: scale(1); }

  50% { transform: scale(1.5); }

  100% { transform: scale(1); }

}



.element {

  animation: complex-animation 2s infinite; /* Runs continuously with defined stages */

}

Scroll Driven Animations

These animations react to the scroll position of a container, creating an engaging user experience. To implement scroll-driven animations, you can utilize:

• animation-timeline: This property defines the timeline for the animation.

• scroll() function: Establishes an automatic scroll timeline linked to the closest scrollable ancestor.

Example:

.element {

  animation: scroll-animation 1s;

  animation-timeline: scroll();

}

The scroll() function tracks the nearest scrollable ancestor, ensuring the animation is appropriately linked to the scroll behavior of the container.

By understanding when to use transitions versus keyframe animations, you can create richer and more interactive web experiences.

View() and View Timeline

The view timeline is a powerful feature that monitors an element's position as it crosses the scroll port the visible area of a scrollable container. This allows you to create animations that respond dynamically to the user's scrolling behavior.

Root Container

When the viewport becomes scrollable, the element that manages the scrolling is known as the root container or root scrolling element. This is typically the html or body element, depending on the browser's rendering.

Example of using view timeline:

.element {
  animation: scroll-animation 1s;
  animation-timeline: view(); /* Tracks animation based on scrolling */
}

In this example, the animation will trigger as the element enters the visible area of the scroll container, enhancing the interactivity and responsiveness of the design. This approach allows for more engaging user experiences by linking animations directly to scroll events.

CSS Frameworks

CSS frameworks provide easier ways to write and manage CSS, enhancing productivity and design consistency. Popular options include:

• Bootstrap and Bulma: Comprehensive frameworks that offer pre-designed components.

• CSS Preprocessors: Tools like Sass, LESS, and Stylus that introduce features such as variables, nesting, and mixins to streamline CSS development.

• BEM (Block Element Modifier): A naming convention that promotes reusable and maintainable CSS by structuring class names logically.

• Utility-First CSS: Frameworks like Tailwind CSS, which focus on providing utility classes for styling directly within HTML.

In this class, we will focus on Tailwind CSS, currently at version 3, with version 4 on the horizon. Tailwind allows you to create complex designs quickly by applying utility classes directly in your HTML, such as text-center, bg-blue-500, or p-4. This approach can significantly speed up development, especially for prototypes and smaller projects.

BEM Naming Convention

BEM is a methodology designed to enhance code reusability and maintainability in front-end development. It breaks down components into three parts:

• Block: The main parent element representing a distinct entity (e.g., header, container).

• Element: A component of the block that serves a specific function (e.g., menu__item, header__logo).

• Modifier: A flag indicating a change in appearance or behavior (e.g., menu__item--active, header--large).

Thank you for your support throughout this learning experience. Your engagement is greatly appreciated. I encourage you to further explore the concepts discussed and to continue practicing and refining your skills.

I welcome your feedback and insights. Please leave a comment below to contribute to the conversation.

I'm Ikoh Sylva, a cloud computing enthusiast with several months of hands-on experience in AWS. I am documenting my cloud journey from a beginner's perspective. If this is of interest to you, please like and follow my posts, and consider sharing this article with others who are beginning their cloud journeys.

You can also connect with me on social media.

LinkedIn Facebook X