Clip-path CSS property

Overview

The clip-path CSS property defines a clipping region to control which parts of an element are visible. Content within the clipping path remains visible, while anything outside is hidden.

Syntax

Use the clip-path property to apply its animation to the element, or use the cp shorthand.

Examples

The examples below illustrate how to use clip-path 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.

Discrete timeline

A discrete timeline requires only two values—an initial value (required for clip-path) and a final one. This is the simplest way to animate CSS properties. In this example, the clip-path property with polygon sub-property is animated from the initial value of 0% 0%, 0% 0%, 0% 100%, 0% 100% to a final value of 0% 0%, 100% 0%, 100% 100%, 0% 100%.

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 clip-path and background-color 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.

Because the clip-path requires the initial value to be set, we have defined it in the first step with 0% offset.

Properties

The list of available properties for the CSS clip-path.

inset

circle

ellipse

polygon