Css Width Animation

Animate Content from 0px to Natural Width in CSS

Introduction

When hovering over a wrapper element, its child element contents can be animated from 0px to their natural width. This is a good alternative to animating from 0px to almost 100% by using the calc() function.

CSS Animation

CSS allows animation of HTML elements without the need for JavaScript. In this article, we will cover the following properties:

• animation
• animation-duration
• animation-timing-function

Limitations

It is important to note that currently, it is not possible to animate auto. To work around this, you can use the max-width and max-height trick or set the width using JavaScript.

Creating an Animation Sequence

To create a CSS animation sequence, style the element you want to animate using the animation property or its sub-properties. This lets you configure the timing, duration, and other settings of the animation.

Example code:

.wrapper { position: relative; } .child { position: absolute; width: 0; height: 100%; background-color: red; overflow: hidden; animation: animate-width 1s linear forwards; } @keyframes animate-width { from { width: 0; } to { width: 100%; } }

This code will animate the .child element from 0px to 100% width when the .wrapper element is hovered over.