| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
animateId |
animate-id |
A DOMString with which to reference the animation. | string |
undefined |
animation |
animation |
Name of the animation to get the keyFrames | "none" | "bounce" | "flash" | "jello" | "pulse" | "rotate" | "shake" | "swing" | "rubberBand" | "tada" | "wobble" | "heartBeat" | "bounceIn" | "bounceInUp" | "bounceInDown" | "bounceOut" | "bounceOutUp" | "bounceOutDown" | "bounceOutRight" | "bounceOutLeft" | "fadeIn" | "fadeInUp" | "fadeInUpBig" | "fadeInDown" | "fadeInDownBig" | "fadeInRightBig" | "fadeInLeftBig" | "fadeOut" | "fadeOutUp" | "fadeOutUpBig" | "fadeOutDown" | "fadeOutDownBig" | "fadeOutRight" | "fadeOutRightBig" | "fadeOutLeft" | "fadeOutLeftBig" | "flip" | "flipInX" | "flipInY" | "flipOutX" | "flipOutY" | "lightSpeedIn" | "lightSpeedOut" | "rotateIn" | "rotateInClockwise" | "rotateInDownLeft" | "rotateInDownRight" | "rotateInUpLeft" | "rotateInUpRight" | "rotateOut" | "rotateOutClockwise" | "rotateOutDownLeft" | "rotateOutDownRight" | "rotateOutUpLeft" | "rotateOutUpRight" | "slideInUp" | "slideInDown" | "slideOutUp" | "slideOutDown" | "slideOutLeft" | "slideOutRight" | "zoomIn" | "zoomInUp" | "zoomInDown" | "zoomInLeft" | "zoomInRight" | "zoomOut" | "zoomOutUp" | "zoomOutDown" | "zoomOutLeft" | "zoomOutRight" | "hinge" | "jackInTheBox" | "rollIn" | "rollOut" | "scale-up-center" | "scale-up-top" | "scale-up-tr" | "scale-up-right" | "scale-up-br" | "scale-up-bottom" | "scale-up-bl" | "scale-up-left" | "scale-up-tl" | "scale-up-hor-center" | "scale-up-hor-left" | "scale-up-hor-right" | "scale-up-ver-center" | "scale-up-ver-top" | "scale-up-ver-bottom" | "scale-down-center" | "scale-down-top" | "scale-down-tr" | "scale-down-right" | "scale-down-br" | "scale-down-bottom" | "scale-down-bl" | "scale-down-left" | "scale-down-tl" | "scale-down-hor-center" | "scale-down-hor-left" | "scale-down-hor-right" | "scale-down-ver-center" | "scale-down-ver-top" | "scale-down-ver-bottom" | "rotate-center" | "rotate-top" | "rotate-tr" | "rotate-right" | "rotate-br" | "rotate-bottom" | "rotate-bl" | "rotate-left" | "rotate-tl" | "rotate-hor-center" | "rotate-hor-top" | "rotate-hor-bottom" | "rotate-vert-center" | "rotate-vert-left" | "rotate-vert-right" | "rotate-diagonal-1" | "rotate-diagonal-2" | "rotate-diagonal-tr" | "rotate-diagonal-br" | "rotate-diagonal-bl" | "rotate-diagonal-tl" | "rotate-scale-up" | "rotate-scale-down" | "rotate-scale-up-hor" | "rotate-scale-down-hor" | "rotate-scale-up-ver" | "rotate-scale-down-ver" | "rotate-scale-up-diag-1" | "rotate-scale-down-diag-1" | "rotate-scale-up-diag-2" | "rotate-scale-down-diag-2" | "rotate-90-cw" | "rotate-90-ccw" | "rotate-90-top-cw" | "rotate-90-top-ccw" | "rotate-90-tr-cw" | "rotate-90-tr-ccw" | "rotate-90-right-cw" | "rotate-90-right-ccw" | "rotate-90-br-cw" | "rotate-90-br-ccw" | "rotate-90-bottom-cw" | "rotate-90-bottom-ccw" | "rotate-90-bl-cw" | "rotate-90-bl-ccw" | "rotate-90-left-cw" | "rotate-90-left-ccw" | "rotate-90-tl-cw" | "rotate-90-tl-ccw" | "rotate-90-horizontal-fwd" | "rotate-90-horizontal-bck" | "rotate-90-vertical-fwd" | "rotate-90-vertical-bck" | "flip-horizontal-bottom" | "flip-horizontal-top" | "flip-horizontal-bck" | "flip-horizontal-fwd" | "flip-vertical-right" | "flip-vertical-left" | "flip-vertical-bck" | "flip-vertical-fwd" | "flip-diagonal-1-tr" | "flip-diagonal-1-bl" | "flip-diagonal-1-bck" | "flip-diagonal-1-fwd" | "flip-diagonal-2-br" | "flip-diagonal-2-tl" | "flip-diagonal-2-bck" | "flip-diagonal-2-fwd" | "flip-2-hor-top-1" | "flip-2-hor-top-2" | "flip-2-hor-top-bck" | "flip-2-hor-top-fwd" | "flip-2-ver-right-1" | "flip-2-ver-right-2" | "flip-2-ver-right-bck" | "flip-2-ver-right-fwd" | "flip-2-hor-bottom-1" | "flip-2-hor-bottom-2" | "flip-2-hor-bottom-bck" | "flip-2-hor-bottom-fwd" | "flip-2-ver-left-1" | "flip-2-ver-left-2" | "flip-2-ver-left-bck" | "flip-2-ver-left-fwd" | "flip-scale-up-hor" | "flip-scale-down-hor" | "flip-scale-up-ver" | "flip-scale-down-ver" | "flip-scale-up-diag-1" | "flip-scale-down-diag-1" | "flip-scale-up-diag-2" | "flip-scale-down-diag-2" | "flip-scale-2-hor-top" | "flip-scale-2-ver-right" | "flip-scale-2-hor-bottom" | "flip-scale-2-ver-left" | "swing-top-fwd" | "swing-top-bck" | "swing-top-right-fwd" | "swing-top-right-bck" | "swing-right-fwd" | "swing-right-bck" | "swing-bottom-right-fwd" | "swing-bottom-right-bck" | "swing-bottom-fwd" | "swing-bottom-bck" | "swing-bottom-left-fwd" | "swing-bottom-left-bck" | "swing-left-fwd" | "swing-left-bck" | "swing-top-left-fwd" | "swing-top-left-bck" | "slide-top" | "slide-tr" | "slide-right" | "slide-br" | "slide-bottom" | "slide-bl" | "slide-left" | "slide-tl" | "slide-bck-center" | "slide-bck-top" | "slide-bck-tr" | "slide-bck-right" | "slide-bck-br" | "slide-bck-bottom" | "slide-bck-bl" | "slide-bck-left" | "slide-bck-tl" | "slide-fwd-center" | "slide-fwd-top" | "slide-fwd-tr" | "slide-fwd-right" | "slide-fwd-br" | "slide-fwd-bottom" | "slide-fwd-bl" | "slide-fwd-left" | "slide-fwd-tl" | "slide-rotate-hor-top" | "slide-rotate-hor-t-bck" | "slide-rotate-hor-t-fwd" | "slide-rotate-ver-right" | "slide-rotate-ver-r-bck" | "slide-rotate-ver-r-fwd" | "slide-rotate-hor-bottom" | "slide-rotate-hor-b-bck" | "slide-rotate-hor-b-fwd" | "slide-rotate-ver-left" | "slide-rotate-ver-l-bck" | "slide-rotate-ver-l-fwd" | "shadow-drop-center" | "shadow-drop-top" | "shadow-drop-right" | "shadow-drop-bottom" | "shadow-drop-left" | "shadow-drop-lr" | "shadow-drop-tb" | "shadow-drop-tr" | "shadow-drop-br" | "shadow-drop-bl" | "shadow-drop-tl" | "shadow-drop-2-center" | "shadow-drop-2-top" | "shadow-drop-2-right" | "shadow-drop-2-bottom" | "shadow-drop-2-left" | "shadow-drop-2-lr" | "shadow-drop-2-tb" | "shadow-drop-2-tr" | "shadow-drop-2-br" | "shadow-drop-2-bl" | "shadow-drop-2-tl" | "shadow-pop-tr" | "shadow-pop-br" | "shadow-pop-bl" | "shadow-pop-tl" | "shadow-inset-center" | "shadow-inset-top" | "shadow-inset-right" | "shadow-inset-bottom" | "shadow-inset-left" | "shadow-inset-lr" | "shadow-inset-tb" | "shadow-inset-tr" | "shadow-inset-br" | "shadow-inset-bl" | "shadow-inset-tl" | "scale-in-center" | "scale-in-top" | "scale-in-tr" | "scale-in-right" | "scale-in-br" | "scale-in-bottom" | "scale-in-bl" | "scale-in-left" | "scale-in-tl" | "scale-in-hor-center" | "scale-in-hor-left" | "scale-in-hor-right" | "scale-in-ver-center" | "scale-in-ver-top" | "scale-in-ver-bottom" | "rotate-in-center" | "rotate-in-top" | "rotate-in-tr" | "rotate-in-right" | "rotate-in-br" | "rotate-in-bottom" | "rotate-in-bl" | "rotate-in-left" | "rotate-in-tl" | "rotate-in-hor" | "rotate-in-ver" | "rotate-in-diag-1" | "rotate-in-diag-2" | "rotate-in-2-cw" | "rotate-in-2-ccw" | "rotate-in-2-fwd-cw" | "rotate-in-2-fwd-ccw" | "rotate-in-2-bck-cw" | "rotate-in-2-bck-ccw" | "rotate-in-2-tr-cw" | "rotate-in-2-tr-ccw" | "rotate-in-2-br-cw" | "rotate-in-2-br-ccw" | "rotate-in-2-bl-cw" | "rotate-in-2-bl-ccw" | "rotate-in-2-tl-cw" | "rotate-in-2-tl-ccw" | "swirl-in-fwd" | "swirl-in-bck" | "swirl-in-top-fwd" | "swirl-in-top-bck" | "swirl-in-tr-fwd" | "swirl-in-tr-bck" | "swirl-in-right-fwd" | "swirl-in-right-bck" | "swirl-in-br-fwd" | "swirl-in-br-bck" | "swirl-in-bottom-fwd" | "swirl-in-bottom-bck" | "swirl-in-bl-fwd" | "swirl-in-bl-bck" | "swirl-in-left-fwd" | "swirl-in-left-bck" | "swirl-in-tl-fwd" | "swirl-in-tl-bck" | "flip-in-hor-bottom" | "flip-in-hor-top" | "flip-in-ver-right" | "flip-in-ver-left" | "flip-in-diag-1-tr" | "flip-in-diag-1-bl" | "flip-in-diag-2-tl" | "flip-in-diag-2-br" | "slit-in-vertical" | "slit-in-horizontal" | "slit-in-diagonal-1" | "slit-in-diagonal-2" | "slide-in-top" | "slide-in-tr" | "slide-in-right" | "slide-in-br" | "slide-in-bottom" | "slide-in-bl" | "slide-in-left" | "slide-in-tl" | "slide-in-fwd-center" | "slide-in-fwd-top" | "slide-in-fwd-tr" | "slide-in-fwd-right" | "slide-in-fwd-br" | "slide-in-fwd-bottom" | "slide-in-fwd-bl" | "slide-in-fwd-left" | "slide-in-fwd-tl" | "slide-in-bck-center" | "slide-in-bck-top" | "slide-in-bck-tr" | "slide-in-bck-right" | "slide-in-bck-br" | "slide-in-bck-bottom" | "slide-in-bck-bl" | "slide-in-bck-left" | "slide-in-bck-tl" | "slide-in-blurred-top" | "slide-in-blurred-tr" | "slide-in-blurred-right" | "slide-in-blurred-br" | "slide-in-blurred-bottom" | "slide-in-blurred-bl" | "slide-in-blurred-left" | "slide-in-blurred-tl" | "slide-in-elliptic-top-fwd" | "slide-in-elliptic-top-bck" | "slide-in-elliptic-right-fwd" | "slide-in-elliptic-right-bck" | "slide-in-elliptic-bottom-fwd" | "slide-in-elliptic-bottom-bck" | "slide-in-elliptic-left-fwd" | "slide-in-elliptic-left-bck" | "bounce-in-top" | "bounce-in-right" | "bounce-in-bottom" | "bounce-in-left" | "bounce-in-fwd" | "bounce-in-bck" | "roll-in-left" | "roll-in-top" | "roll-in-right" | "roll-in-bottom" | "roll-in-blurred-left" | "roll-in-blurred-top" | "roll-in-blurred-right" | "roll-in-blurred-bottom" | "tilt-in-top-1" | "tilt-in-top-2" | "tilt-in-tr" | "tilt-in-right-1" | "tilt-in-right-2" | "tilt-in-br" | "tilt-in-bottom-1" | "tilt-in-bottom-2" | "tilt-in-bl" | "tilt-in-left-1" | "tilt-in-left-2" | "tilt-in-tl" | "tilt-in-fwd-tr" | "tilt-in-fwd-br" | "tilt-in-fwd-bl" | "tilt-in-fwd-tl" | "swing-in-top-fwd" | "swing-in-top-bck" | "swing-in-right-fwd" | "swing-in-right-bck" | "swing-in-bottom-fwd" | "swing-in-bottom-bck" | "swing-in-left-fwd" | "swing-in-left-bck" | "fade-in-fwd" | "fade-in-bck" | "fade-in-top" | "fade-in-tr" | "fade-in-right" | "fade-in-br" | "fade-in-bottom" | "fade-in-bl" | "fade-in-left" | "fade-in-tl" | "puff-in-center" | "puff-in-top" | "puff-in-tr" | "puff-in-right" | "puff-in-br" | "puff-in-bottom" | "puff-in-bl" | "puff-in-left" | "puff-in-tl" | "puff-in-hor" | "puff-in-ver" | "flicker-in-1" | "flicker-in-2" | "tracking-in-expand" | "tracking-in-expand-fwd" | "tracking-in-expand-fwd-top" | "tracking-in-expand-fwd-bottom" | "tracking-in-contract" | "tracking-in-contract-bck" | "tracking-in-contract-bck-top" | "tracking-in-contract-bck-bottom" | "text-focus-in" | "focus-in-expand" | "focus-in-expand-fwd" | "focus-in-contract" | "focus-in-contract-bck" | "text-shadow-drop-center" | "text-shadow-drop-top" | "text-shadow-drop-tr" | "text-shadow-drop-right" | "text-shadow-drop-br" | "text-shadow-drop-bottom" | "text-shadow-drop-bl" | "text-shadow-drop-left" | "text-shadow-drop-tl" | "text-shadow-pop-top" | "text-shadow-pop-tr" | "text-shadow-pop-right" | "text-shadow-pop-br" | "text-shadow-pop-bottom" | "text-shadow-pop-bl" | "text-shadow-pop-left" | "text-shadow-pop-tl" | "text-pop-up-top" | "text-pop-up-tr" | "text-pop-up-right" | "text-pop-up-br" | "text-pop-up-bottom" | "text-pop-up-bl" | "text-pop-up-left" | "text-pop-up-tl" | "vibrate-1" | "vibrate-2" | "shake-horizontal" | "shake-vertical" | "shake-lr" | "shake-top" | "shake-tr" | "shake-right" | "shake-br" | "shake-bottom" | "shake-bl" | "shake-left" | "shake-tl" | "jello-horizontal" | "jello-vertical" | "jello-diagonal-1" | "jello-diagonal-2" | "wobble-hor-bottom" | "wobble-hor-top" | "wobble-ver-left" | "wobble-ver-right" | "bounce-top" | "bounce-bottom" | "bounce-left" | "bounce-right" | "pulsate-bck" | "pulsate-fwd" | "ping" | "ken-burns-top" | "ken-burns-top-right" | "ken-burns-right" | "ken-burns-bottom-right" | "ken-burns-bottom" | "ken-burns-bottom-left" | "ken-burns-left" | "ken-burns-top-left" | "bg-pan-left" | "bg-pan-right" | "bg-pan-top" | "bg-pan-bottom" | "bg-pan-tr" | "bg-pan-br" | "bg-pan-bl" | "bg-pan-tl" |
undefined |
autoPlay |
autoplay |
Start the animation when the component is mounted. | boolean |
false |
composite |
composite |
Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. Defaults to replace. |
"accumulate" | "add" | "replace" |
undefined |
currentTime |
current-time |
Sets the current time value of the animation in milliseconds, whether running or paused. | number |
undefined |
delay |
delay |
The number of milliseconds to delay the start of the animation. Defaults to 0. | number |
undefined |
direction |
direction |
Direction of the animation. | "alternate" | "alternate-reverse" | "normal" | "reverse" |
undefined |
duration |
duration |
The number of milliseconds each iteration of the animation takes to complete. Defaults to 0. | number |
undefined |
easing |
easing |
The rate of the animation's change over time. | string |
undefined |
endDelay |
end-delay |
The number of milliseconds to delay after the end of an animation. | number |
undefined |
fill |
fill |
Dictates whether the animation's effects should be reflected by the element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both. Defaults to "none". | "auto" | "backwards" | "both" | "forwards" | "none" |
undefined |
fromClassName |
from-class-name |
The class name to be applied when the animation starts | string |
undefined |
iterationComposite |
iteration-composite |
Determines how values build from iteration to iteration in this animation. | "accumulate" | "replace" |
undefined |
iterationStart |
iteration-start |
Describes at what point in the iteration the animation should start. | number |
undefined |
iterations |
iterations |
The number of times the animation should repeat. Defaults to 1, and can also take a value of Infinity to make it repeat for as long as the element exists. |
number |
undefined |
keyFrames |
-- | Keyframes of the animation. | Keyframe[] |
undefined |
keyFramesData |
key-frames-data |
Keyframes of the animation in string format. | string |
undefined |
options |
-- | Default options of the animation. | KeyframeAnimationOptions |
undefined |
optionsData |
options-data |
Default options of the animation in string format. | string |
undefined |
playbackRate |
playback-rate |
Sets the playback rate of the animation. | number |
undefined |
startTime |
start-time |
Sets the scheduled time when an animation's playback should begin. | number |
undefined |
toClassName |
to-class-name |
The class name to be applied when the animation ends | string |
undefined |
| Event | Description | Type |
|---|---|---|
cancel |
This event is sent when the animation is cancelled. | CustomEvent<HTMLElement> |
finish |
This event is sent when the animation finishes playing. | CustomEvent<HTMLElement> |
start |
This event is sent when the animation is going to play. | CustomEvent<HTMLElement> |
Clears all KeyframeEffects caused by this animation and aborts its playback.
Type: Promise<void>
Clear the current animation
Type: Promise<void>
Destroy the current animation
Type: Promise<void>
Sets the current playback time to the end of the animation corresponding to the current playback direction.
Type: Promise<void>
Returns the current time value of the animation in milliseconds, whether running or paused.
Type: Promise<number>
Indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation.
Type: Promise<boolean>
Returns an enumerated value describing the playback state of an animation.
Type: Promise<AnimationPlayState>
Returns the playback rate of the animation.
Type: Promise<number>
Returns the scheduled time when an animation's playback should begin.
Type: Promise<number>
Suspends playback of the animation.
Type: Promise<void>
Starts or resumes playing of an animation.
Type: Promise<void>
Reverses the playback direction, meaning the animation ends at its beginning.
Type: Promise<void>
| Slot | Description |
|---|---|
| Content is placed into the cube. | |
"back-face" |
Content is placed into the back face of the cube. |
"bottom-face" |
Content is placed into the bottom face of the cube. |
"front-face" |
Content is placed into the front face of the cube. |
"left-face" |
Content is placed into the left face of the cube. |
"right-face" |
Content is placed into the right face of the cube. |
"top-face" |
Content is placed into the top face of the cube. |
| Name | Description |
|---|---|
--animatable-cube-align-items |
Align items of the cube |
--animatable-cube-animation |
Animation of the cube |
--animatable-cube-back-face-animation |
Animation of the back face |
--animatable-cube-back-face-background |
Background of the back face |
--animatable-cube-bottom-face-animation |
Animation of the bottom face |
--animatable-cube-bottom-face-background |
Background of the bottom face |
--animatable-cube-display |
Display of the cube |
--animatable-cube-face-animation |
Cube faces background animation |
--animatable-cube-face-animation-delay |
Defines when the background animation will start |
--animatable-cube-face-animation-direction |
Defines the direction of the background animation |
--animatable-cube-face-animation-duration |
Defines the length of time that background animation takes to complete one cycle |
--animatable-cube-face-animation-iteration-count |
Defines the number of times the background animation cycle is played |
--animatable-cube-face-animation-timing-function |
Describes how the background animation will progress over one cycle of its duration |
--animatable-cube-face-background |
Cube faces background |
--animatable-cube-face-background-size |
Cube faces background size |
--animatable-cube-face-border |
Cube faces border |
--animatable-cube-face-transform-origin |
Establishes the origin of transformation for the cube faces |
--animatable-cube-front-face-animation |
Animation of the front face |
--animatable-cube-front-face-background |
Background of the front face |
--animatable-cube-height |
Height of the cube |
--animatable-cube-justify-content |
Justify content of the cube |
--animatable-cube-left-face-animation |
Animation of the left face |
--animatable-cube-left-face-background |
Background of the left face |
--animatable-cube-margin |
Margin of the cube |
--animatable-cube-padding |
Padding of the cube |
--animatable-cube-perspective |
Perspective of the cube |
--animatable-cube-perspective-origin |
Indicates the position of the abscissa and the ordinate of the vanishing point. |
--animatable-cube-right-face-animation |
Animation of the right face |
--animatable-cube-right-face-background |
Background of the right face |
--animatable-cube-size |
Size of the cube |
--animatable-cube-top-face-animation |
Animation of the top face |
--animatable-cube-top-face-background |
Background of the top face |
--animatable-cube-transform |
Transform of the cube |
--animatable-cube-transform-origin |
Transform origin of the cube |
--animatable-cube-transition-delay |
Defines when the transition of the cube will start |
--animatable-cube-transition-duration |
Specifies the duration of the transition to resize the cube |
--animatable-cube-transition-property |
Specifies the name of the CSS property the cube's transition effect is for |
--animatable-cube-transition-timing-function |
Describes how the intermediate values used during the transition of the cube will be calculated |
--animatable-cube-width |
Width of the cube |
Built with StencilJS