Web Styling .3

Web Styling .3

The Language of Movement with CSS Transitions and Animations

B. Shrutik's photo
B. Shrutik
·

7 min read

In this post, we'll unravel the essence of CSS transitions and animations, exploring their significance in modern web development. From enhancing user engagement to conveying information seamlessly, these tools play a vital role in creating immersive digital experiences.

CSS Animations >

CSS animations allow you to animate the properties of HTML elements over a given duration using keyframes. This can create effects such as moving, fading, resizing, rotating, and more.

There are three key advantages to CSS animations over traditional script-driven animation techniques:

  1. They're easy to use for simple animations; you can create them without knowing JavaScript.

  2. The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript. The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.

  3. Letting the browser control the animation sequence enables the browser to optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.

Basics of CSS Animation:

CSS animations are defined using the @keyframes rule, which describes the sequence of frames or steps of the animation. These keyframes are then applied to elements using the animation property.

Keyframes:

The @keyframes rule defines the animation. You specify the name of the animation and the various stages (or keyframes) with the properties to be animated.

cssCopy code@keyframes example {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

In this example, an element will move 100 pixels to the right.

Applying the Animation

To apply the animation to an element, you use the animation property. This can include various sub-properties such as:

  1. animation-name: Specifies the name of the @keyframes animation.

  2. animation-duration: Defines how long the animation takes to complete one cycle. It can be specified in seconds (s) or milliseconds (ms).

  3. animation-timing-function: Describes how the animation progresses over its duration. Common values include linear, ease, ease-in, ease-out, ease-in-out, and cubic-bezier(n,n,n,n).

  4. animation-delay: Specifies a delay before the animation starts. It can be specified in seconds (s) or milliseconds (ms).

  5. animation-iteration-count: Defines the number of times the animation should repeat. It can be a specific number or infinite.

  6. animation-direction: Specifies whether the animation should play in reverse on alternate cycles. Values include normal, reverse, alternate, and alternate-reverse.

  7. animation-fill-mode: Defines what styles are applied to the element when the animation is not playing (before it starts, after it ends). Values include none, forwards, backwards, and both.

  8. animation-play-state: Allows the animation to be paused or running. Values are paused and running.

Here's how you apply the animation:

cssCopy code.element {
  animation-name: example;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}

Sample Example:

In this an element changes color and size while moving across the screen.

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Animation Example</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      animation-name: moveAndTransform;
      animation-duration: 4s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }

    @keyframes moveAndTransform {
      0% {
        transform: translateX(0) scale(1);
        background-color: red;
      }
      50% {
        transform: translateX(200px) scale(1.5);
        background-color: blue;
      }
      100% {
        transform: translateX(0) scale(1);
        background-color: red;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Concept behind it:

  • HTML: Contains a single div with the class box.

  • CSS:

    • The .box class sets the initial size, color, and position of the element.

    • The animation properties apply the moveAndTransform animation to the .box element.

    • The @keyframes rule named moveAndTransform defines the animation:

      • At 0%, the element is at its original position, scale, and color.

      • At 50%, the element is moved 200 pixels to the right, scaled up by 1.5 times, and changes its color to blue.

      • At 100%, it returns to its original position, scale, and color.

More Examples:

Rotating an Element

cssCopy code@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate-element {
  animation-name: rotate;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

Fading In and Out

cssCopy code@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.fade-element {
  animation-name: fadeInOut;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

Combining Multiple Animations:

You can combine multiple animations using a comma-separated list:

cssCopy code.element {
  animation: move 2s ease-in-out infinite, rotate 3s linear infinite;
}

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

CSS Transitions >

CSS transitions enable you to change property values smoothly (over a given duration) rather than abruptly. They are a simpler way to animate changes to CSS properties and are typically used for UI interactions such as hover effects, focus states, or when elements enter or leave the viewport.

Basic Concept:

A CSS transition occurs when a property changes from one value to another over a specified duration. The transition property is shorthand for four properties:

  1. transition-property: Specifies the CSS property you want to animate.

  2. transition-duration: Specifies the duration over which the transition occurs.

  3. transition-timing-function: Describes how the intermediate values are calculated. Common values include ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier(n,n,n,n).

  4. transition-delay: Defines the wait time before the transition starts.

Syntax:

cssCopy code.element {
  transition: <property> <duration> <timing-function> <delay>;
}

Sample Example:

Simple transition that changes the background color of a box when it is hovered over:

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Transitions Example</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: background-color 0.5s ease;
    }

    .box:hover {
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Breakdown of the Code:

  • HTML: Contains a single div with the class box.

  • CSS:

    • The .box class sets the initial size and color of the element.

    • The transition property is applied to the background-color, specifying that it should transition over 0.5 seconds using an ease timing function.

    • When the .box is hovered over, the background-color changes to blue.

Advanced Transitions:

You can apply transitions to multiple properties at once, and you can specify different transition durations, timing functions, and delays for each property:

cssCopy code.element {
  transition: width 2s ease-in-out, height 1s ease, transform 0.5s linear;
}

.element:hover {
  width: 200px;
  height: 200px;
  transform: rotate(45deg);
}

Transition Timing Functions:

  • linear: The transition progresses at a constant speed.

  • ease: Starts slow, then fast, then slow again (default).

  • ease-in: Starts slow and accelerates.

  • ease-out: Starts fast and decelerates.

  • ease-in-out: Starts slow, speeds up, then slows down.

  • cubic-bezier(n,n,n,n): Allows you to define your custom timing function.

Example with a cubic-bezier function:

cssCopy code.element {
  transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

Transition Delays:

You can delay the start of a transition using transition-delay:

cssCopy code.element {
  transition: transform 2s ease-in 1s; /* 1-second delay before starting */
}

.element:hover {
  transform: scale(1.5);
}

Transition with JavaScript:

You can trigger transitions using JavaScript by changing the properties directly or by adding/removing classes:

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Transitions with JavaScript</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: width 2s;
    }

    .box.wide {
      width: 300px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <button id="toggleWidth">Toggle Width</button>

  <script>
    const box = document.querySelector('.box');
    const button = document.getElementById('toggleWidth');

    button.addEventListener('click', () => {
      box.classList.toggle('wide');
    });
  </script>
</body>
</html>

Chaining and Multiple Transitions:

You can apply multiple transitions to the same element for different properties or chain transitions:

cssCopy code.element {
  transition: opacity 1s, transform 1s 0.5s; /* Transform starts after a 0.5s delay */
}

.element.hidden {
  opacity: 0;
  transform: scale(0.5);
}

Using all :

The transition property can be set to all to apply the transition to all animatable properties:

cssCopy code.element {
  transition: all 0.5s ease;
}

.element:hover {
  width: 150px;
  height: 150px;
  background-color: yellow;
  transform: rotate(45deg);
}

Advanced Techniques:

Transitioning Non-Numeric Properties:

While numeric properties like width, height, opacity, and transform are commonly transitioned, you can also transition non-numeric properties like colors:

cssCopy code.element {
  transition: background-color 1s ease;
}

.element:hover {
  background-color: #3498db;
}

Transitioning Pseudo-Elements:

You can transition pseudo-elements (::before and ::after), which can be useful for creative effects:

cssCopy code.button::before {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background: #3498db;
  transform: scaleX(0);
  transition: transform 0.5s ease-in-out;
}

.button:hover::before {
  transform: scaleX(1);
}

Using CSS Variables with Transitions and Animations:

CSS variables can be animated and transitioned, allowing for dynamic and reusable animations:

cssCopy code:root {
  --main-color: red;
  --hover-color: blue;
  --duration: 0.5s;
}

.element {
  background-color: var(--main-color);
  transition: background-color var(--duration);
}

.element:hover {
  background-color: var(--hover-color);
}

As we wrap up our journey through CSS transitions and animations, we've witnessed how they breathe life into web design. CSS animations offer endless possibilities, from enhancing user engagement to creating memorable interactions.

That was all for the 3rd part..Stay tuned for the rest 2 parts.

I hope this post has been helpful. If you have any questions, please feel free to leave a comment below.

Happy Coding !

Thank You

Web DevelopmentCSSanimationwebdevstylingbeginnerTutorial