Push animation
Create a "push" CSS animation effect right in the HTML code
Overview
The push alias pushes the element to its shifted position from original one. It can be used in the horizontal (push-{left|right}), or in the vertical (push-{up|down}) direction, triggered by various events. This is useful for scenarios like promoting buttons on hover or creating reveal animations on inview.
Syntax
Default
The default push-up and push-down parameters:
| Name | Start value (default) | End value |
|---|---|---|
push-up |
0rem |
-0.5rem |
| Name | Start value (default) | End value |
|---|---|---|
push-down |
0rem |
0.5rem |
The default push-left and push-right parameters:
| Name | Start value (default) | End value |
|---|---|---|
push-left |
0rem |
0.5rem |
| Name | Start value (default) | End value |
|---|---|---|
push-right |
0rem |
-0.5rem |
Custom values
You can change the initial (starting) value and customize its options.
Examples
These examples show the push-* alias in action using the hover trigger, but you can use any of the supported triggers.
Default
By default, the push-* alias will translate the element by 0.5rem in horizontal and vertical direction.
push-up
The push-up alias moves the element upward from the bottom, translating it vertically.
push-down
The push-down alias moves the element downward from the top, translating it vertically.
push-left
The push-left alias moves the element leftward from the right, translating it horizontally.
push-right
The push-right alias moves the element rightward from the left, translating it horizontally.
Custom values
Customize the initial value (starting position) of the element by passing the custom value into the alias parenthesis (). In these cases, the custom value is 2rem.
Push up
The hover:push-up(2rem) effect sets the initial position to 2rem and translate it upwards to the end value (default) of 0rem on hover.
Push left
Similar to above, but now the hover:push-left(2rem) translates the element to the left from its initial value of 2rem.
Combination
You can even combine different push-* directions.
Options
All property options passed in the <> are supported.