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 likehoverorclickwon’t work directly on it. To enable interactions, apply thehoverorclicktriggers 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.