Introduction

In modern web design, CSS animations have emerged as a fundamental tool to enhance the interactivity and aesthetics of web pages. These animations allow developers to implement smooth transitions and dynamic visual effects that not only capture the user's attention but also improve usability and the overall site experience. Throughout this document, we will explore the basics of CSS animations, from the animation property to the @keyframes rules, and discuss how they can be applied to create more attractive and functional interfaces.

CSS Animations

CSS animations allow designers to create smooth transitions and striking visual effects with relative ease. By using properties such as animation-name, animation-duration, animation-timing-function, and more, you can meticulously control how page elements come to life.

Animation Property:The CSS animation property is a shorthand that combines several sub-properties that control different aspects of an animation:

• animation-name: Defines the name of the @keyframes that controls the animation.
• animation-duration: Sets how long one cycle of the animation lasts.
• animation-timing-function: Controls the speed curve of the animation (for example, linear, ease-in, ease-out, ease-in-out).
• animation-delay: Sets a waiting time before the animation starts.
• animation-iteration-count: Defines how many times the animation repeats (can be a number or infinite for an infinite loop).
• animation-fill-mode: Specifies a style for the element when the animation is not playing (for example, before starting, after finishing).

@keyframes Rule:This rule defines the animation states, specifying styles at various points over time. You can define from two points (start and end) to multiple intermediate points:

/* Definition of the keyframes */
@keyframes fadeInMove {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Applying the animation to the element */
div {
    width: 100px;
    height: 100px;
    background-color: blue;
    
    animation-name: fadeInMove;               /* Animation name */
    animation-duration: 3s;                   /* Animation duration */
    animation-timing-function: ease-in-out;   /* Timing function */
    animation-delay: 1s;                      /* Delay before starting the animation */
    animation-iteration-count: infinite;      /* Number of repetitions */
    animation-direction: alternate;           /* Animation direction */
    animation-fill-mode: forwards;            /* Final animation style */
}

How They Work

When you apply an animation to an element, the browser interpolates the styles between the points defined in the @keyframes. This means it calculates the intermediate values between the points you specified. For example, if you animate the background-color from red to green, the browser automatically generates the intermediate colors during the animation.

Examples:

• Simple Animation: A button that gradually changes color when hovered.

.button:hover {
  animation: colorChange 1s ease;
}

@keyframes colorChange {
  from { background-color: blue; }
  to { background-color: red; }
}

• Complex Animation: Blue box with a sliding animation

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.cardOutDown {
  display: flex;
  align-content: center;
  justify-content: center;
  margin-top: 100px;
}
.zoomOutDown {
  width: 200px;
  height: 200px;
  background-color: blue;
  animation-name: zoomOutDown;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  transform-origin: center bottom;
}

Skeleton as a More Elaborate Example

The "skeleton" effect is commonly used in interface design to improve the user experience during content loading. These "skeleton" elements are often animated to indicate that content is loading, and animations like pulsing or smooth movements are frequently used to attract attention and improve perceived performance.

I will adapt the previous example to create a pulsing effect that could be applied to a skeleton element while waiting for content to load.

.skeleton {
  width: 80%;
  max-width: 600px;
  margin-bottom: 5px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.skeleton-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%);
  background-size: 800px 104px;
  animation: loading 1.2s infinite;
  margin-bottom: 10px;
}

To see the complete code and explore how it was implemented, you can visit the following link to the repository. There you will find all the necessary details to appreciate the implementation and functionality of the animation: https://github.com/karlacabanas01/skeleton

Pseudoclasses in Animations

Pseudoclasses determine the state of an element to which an animation is applied, allowing animations to be triggered based on user interaction. Some examples include:

• :hover: Starts an animation when the user hovers over an element.
• :focus: Activates an animation when an element gains focus, commonly used in forms.
• :active: Triggers an animation during interaction, such as when clicking a button.
• :checked: Applies animations on selected form elements to enhance visual feedback.

Pseudo-elements in Animations

Pseudo-elements allow animating specific parts of an element without adding more elements to the HTML, ideal for adding aesthetic details or visual effects.

• ::before and ::after: Used to create additional content before or after the main content of an element. These pseudo-elements can be animated to create effects such as loading animations, decorations that appear or transform in response to interaction.

⚠️ Key Differences:

• Pseudoclasses: Applied to specific states or conditions of an element, such as :hover or :active.
• Pseudo-elements: Allow styling specific parts of an element, acting as virtual "sub-elements," examples include ::before and ::after

Comparison Table between Transitions and Animations in CSS:Transformations:

• animation-direction: Indicates whether the animation should alternate its direction (go and return).

Transformations in CSS allow modifying the spatial appearance of an element, such as its size, shape, position, and orientation, without affecting other elements in the document. Transformations do not alter the document flow, meaning the original space of the element remains the same. Transformations are powerful for creating dynamic visual effects.

Most common transformation properties:

• translate(x, y): Moves an element along the horizontal (x) and vertical (y) plane.
• scale(sx, sy): Scales an element, increasing or decreasing its size. If only sx is specified, scaling will be uniform.
• rotate(angle): Rotates an element around its center point.
• skewX(angle) and skewY(angle): Skew an element by distorting its X or Y axes.

.element {
    transform: rotate(45deg) translate(100px, 50px) scale(1.5);
}

Transitions:

Transitions are ideal for subtle effects, such as changing the background color of a button when hovering.

Transitions provide a way to control the change of CSS property values over a period of time. This is especially useful for animating state changes, such as in :hover or when modifying properties via JavaScript.

Key components of a transition:

• transition: property duration timing-function delay;
  • transition: background-color 0.3s ease;
• transition-property: The CSS property to be animated.
• transition-duration: How long the transition will last.
• transition-timing-function: Defines how intermediate values are calculated (e.g., linear, ease-in, ease-out).
• transition-delay: Time to wait before the transition starts.

Example of a transition:

.hover-button {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: blue;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth background color transition */
}

.hover-button:hover {
    background-color: red; /* Color change when the cursor is over the button */
}

The use of pseudoclasses in CSS for transitions:

• :hover: Activates transitions when hovering over an element.
• :focus: Applies transitions when an element gains focus.
• :active: Starts transitions during interaction, such as when clicking.
• :checked: Used for transitions on selected elements, like checkboxes.
• :not(): Applies styles excluding specific elements in transitions.

On the other hand, pseudo-elements in CSS, such as ::before and ::after, are used in transitions to add visual effects without modifying the HTML. You can apply transitions to these to animate decorative elements, like lines or icons, that appear before or after the main content of an element.

☝🏻 Differences

• Transformations are used to apply geometric effects to elements. They are static if not combined with transitions or animations.
• Transitions are ideal for animating changes of CSS properties smoothly and gradually. They require a change in the property value to activate, such as a state change or a modification by script.

Comparison table between transitions and animations in CSS:

Project with the learned concepts:

This project represents an initial prototype of how a basic web page could look, including read-only elements. It also incorporates some concepts discussed in the previous three articles. Additionally, I will provide a link to the project on GitHub to facilitate a more detailed and understandable view.

For a more detailed view and understanding of the code and the elements discussed in the previous posts, as well as this article about CSS, visit the following link to the project repository. Here you can directly explore how these concepts have been implemented in a real web page, thus facilitating a better appreciation of the learning achieved so far.

https://github.com/karlacabanas01/page-post-3

Conclusion

CSS animations are an incredibly powerful tool in any front-end developer’s arsenal, providing a means not only to attract users but also to guide their interaction through the user interface intuitively. By integrating techniques such as transformations, transitions, and detailed animations, developers can create a richer and more engaging user experience. Furthermore, by using pseudoclasses and pseudo-elements to control these animations, a range of possibilities opens up to design interfaces that are not only beautiful but also highly functional and responsive to user actions. As we continue to explore and experiment with these techniques, we will surely see even more creative innovations in web design in the future.

Ready to take your website’s user experience to the next level with effective CSS animations?

At Kranio, we have experts in web design and development who will help you implement CSS animations that enhance the interactivity and aesthetics of your pages, ensuring an optimal user experience. Contact us and discover how we can help you create more attractive and functional interfaces.