Clip animation
Create a "clip" CSS animation effect right in the HTML code
Overview
The clip-*
aliases transition an element from invisible to fully visible by clipping it. They create a rectangular clipping area that hides everything outside the visible region.
Since the
clip-*
alias hides the entire element, triggers likehover
orclick
won’t work directly on it. To enable interactions, apply thehover
orclick
triggers to the target parameter instead.
Syntax
Examples
These examples show the clip
alias in action using the hover
trigger, but you can use any of the supported triggers.
clip-up
The clip-up
alias reveals the element upward, starting from the bottom.
clip-down
The clip-down
alias reveals the element downward, starting from the top.
clip-left
The clip-left
alias reveals the element leftward, starting from the right.
clip-right
The clip-right
alias reveals the element rightward, starting from the left.
Custom values
This effect does not support any custom values.
Options
All property options passed in the <>
are supported.