Width and Height CSS properties
Learn how to animate the width and height of an element
Overview
Animate the element’s width and height dimensions easily with the width and height properties.
Syntax
To animate the width, use the standard CSS width syntax, or the w shorthand followed by the value defined in the parenthesis. The same applies for the height property - use height or the h shorthand.
Examples
The examples below illustrate how to use width for hover effects, initial states, and animation timelines.
Initial value
Sometimes you need to start the animation, (or just style the element) from certain predefined state - an initial value. Because the TorusKit process the elements before the render, there is no Flash of unstyled content, so the styles are applied immediately after the page load.
Width
Height
Discrete timeline
A discrete timeline requires only two values—an initial value (optional) and a final one. This is the simplest way to animate CSS properties. In this example, the width property is animated to a final value of 10rem. In this case, the initial value is computed automatically from the element’s CSS.
Sequenced timeline
A sequenced timeline animates properties in a sequence (series) of steps. When one step finishes, the next one begins. Each step can include one or multiple properties. In this example, we animate the width and height properties.
Offset timeline
In an offset timeline, intermediate steps in an animation sequence are defined by percentage offsets. This example demonstrates how to animate the above example, but with using the offsets this time.
In this case, we have omitted the first step with an offset of 0%, which is typically used to set the initial values for all properties. As a result, TorusKit retrieves the initial values from the current element’s style.