From fdf42a63664cd50e44792a23314869e80963d362 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Tue, 1 Sep 2020 09:16:59 -0700 Subject: [PATCH] transition-style bump to 0.1.0 --- README.md | 12 ++++++++---- package.json | 5 +++-- src/_base.css | 4 ++-- src/circles/in-bottom-left.css | 2 +- src/circles/in-bottom-right.css | 2 +- src/circles/in-center.css | 2 +- src/circles/in-hesitate.css | 2 +- src/circles/in-top-left.css | 2 +- src/circles/in-top-right.css | 2 +- src/circles/out-bottom-left.css | 2 +- src/circles/out-bottom-right.css | 2 +- src/circles/out-center.css | 2 +- src/circles/out-hesitate.css | 2 +- src/circles/out-top-left.css | 2 +- src/circles/out-top-right.css | 2 +- src/polygons/diamond-in-center.css | 2 +- src/polygons/diamond-in-height-width.css | 2 +- src/polygons/diamond-out-center.css | 2 +- src/polygons/diamond-out-height-width.css | 2 +- src/polygons/opposing-corners-in.css | 2 +- src/polygons/opposing-corners-out.css | 2 +- src/squares/in-bottom-left.css | 2 +- src/squares/in-bottom-right.css | 2 +- src/squares/in-center.css | 2 +- src/squares/in-hesitate.css | 2 +- src/squares/in-top-left.css | 2 +- src/squares/in-top-right.css | 2 +- src/squares/out-bottom-left.css | 2 +- src/squares/out-bottom-right.css | 2 +- src/squares/out-center.css | 2 +- src/squares/out-hesitate.css | 2 +- src/squares/out-top-left.css | 2 +- src/squares/out-top-right.css | 2 +- src/wipes/in-bottom-left.css | 2 +- src/wipes/in-bottom-right.css | 2 +- src/wipes/in-bottom.css | 4 ++-- src/wipes/in-left.css | 2 +- src/wipes/in-right.css | 2 +- src/wipes/in-top-left.css | 2 +- src/wipes/in-top-right.css | 2 +- src/wipes/in-top.css | 4 ++-- src/wipes/out-bottom-left.css | 2 +- src/wipes/out-bottom-right.css | 2 +- src/wipes/out-bottom.css | 4 ++-- src/wipes/out-left.css | 2 +- src/wipes/out-right.css | 2 +- src/wipes/out-top-left.css | 2 +- src/wipes/out-top-right.css | 2 +- src/wipes/out-top.css | 4 ++-- transition.circles.min.css | 2 +- transition.hackpack.min.css | 2 +- transition.min.css | 2 +- transition.polygons.min.css | 2 +- transition.squares.min.css | 2 +- transition.wipes.min.css | 2 +- 55 files changed, 69 insertions(+), 64 deletions(-) diff --git a/README.md b/README.md index 149e018..6b2f62c 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ Import the CSS and set an attribute on some HTML: ```html -
+
👍
``` @@ -80,18 +80,22 @@ by importing only the custom properties and base styles: After `transition.css` has been added to your project, add an attribute to an element and watch the magic: ```html -
+
A transitioned IN element
-
+
A transitioned OUT element
``` > if nothing is happening when using the attributes, it's likely `transition.css` has not loaded +<<<<<<< HEAD
+======= +Attributes were chosen as the default so there's no question which transition is active. **There can be only 1 at a time.** With classes, for example, what happens when multiple "transition in" classes are applied to an element? Transition.css chooses to default with a state machine approach so things like a classname collision doesn't need solved. See the [custom](#custom) section below for ways to use classes and/or the shape custom properties so transition.css can fit into your development environment. The built in attribute based approach is very easy to hack, customize and escape. +>>>>>>> 5cc68bf (move to hyphen, breaking version change) #### Using `@keyframes` Each bundle ships with the `@keyframes` declared, and you can use them as you see fit. You can use these to build your own animations or just hook into the presets in your own way: @@ -152,7 +156,7 @@ Go off the rails and build your own transitions with these variables. There's ev Then, in the HTML: ```html -
+
A custom transitioned element
``` diff --git a/package.json b/package.json index e8af7ca..58d2b20 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "transition-style", - "version": "0.0.8", + "version": "0.1.0", "author": "Adam Argyle", "description": "just add water clip-path mask transitions", "license": "ISC", @@ -13,7 +13,8 @@ "css", "transitions", "animations", - "masking" + "masking", + "clip-path" ], "main": "transition.min.css", "style": "transition.min.css", diff --git a/src/_base.css b/src/_base.css index 66fe07a..828a021 100644 --- a/src/_base.css +++ b/src/_base.css @@ -1,4 +1,4 @@ -[transition] { +[transition-style] { animation-delay: var(--transition__delay, 0); animation-duration: var(--transition__duration, 2.5s); animation-timing-function: var(--transition__easing, cubic-bezier(.25, 1, .30, 1)); @@ -7,7 +7,7 @@ } @media print, (prefers-reduced-motion: reduce) { - [transition] { + [transition-style] { animation-duration: 1ms !important; transition-duration: 1ms !important; animation-iteration-count: 1 !important; diff --git a/src/circles/in-bottom-left.css b/src/circles/in-bottom-left.css index bf0c0aa..52ac12a 100644 --- a/src/circles/in-bottom-left.css +++ b/src/circles/in-bottom-left.css @@ -7,6 +7,6 @@ } } -[transition="in:circle:bottom-left"] { +[transition-style="in:circle:bottom-left"] { animation-name: circle-in-bottom-left; } \ No newline at end of file diff --git a/src/circles/in-bottom-right.css b/src/circles/in-bottom-right.css index 14b8dd2..e62884f 100644 --- a/src/circles/in-bottom-right.css +++ b/src/circles/in-bottom-right.css @@ -7,6 +7,6 @@ } } -[transition="in:circle:bottom-right"] { +[transition-style="in:circle:bottom-right"] { animation-name: circle-in-bottom-right; } \ No newline at end of file diff --git a/src/circles/in-center.css b/src/circles/in-center.css index 44b0233..20cbe41 100644 --- a/src/circles/in-center.css +++ b/src/circles/in-center.css @@ -7,6 +7,6 @@ } } -[transition="in:circle:center"] { +[transition-style="in:circle:center"] { animation-name: circle-in-center; } \ No newline at end of file diff --git a/src/circles/in-hesitate.css b/src/circles/in-hesitate.css index 3d3d9db..e7c686e 100644 --- a/src/circles/in-hesitate.css +++ b/src/circles/in-hesitate.css @@ -10,6 +10,6 @@ } } -[transition="in:circle:hesitate"] { +[transition-style="in:circle:hesitate"] { animation-name: circle-in-hesitate; } \ No newline at end of file diff --git a/src/circles/in-top-left.css b/src/circles/in-top-left.css index 41bad3a..c7587eb 100644 --- a/src/circles/in-top-left.css +++ b/src/circles/in-top-left.css @@ -7,6 +7,6 @@ } } -[transition="in:circle:top-left"] { +[transition-style="in:circle:top-left"] { animation-name: circle-in-top-left; } \ No newline at end of file diff --git a/src/circles/in-top-right.css b/src/circles/in-top-right.css index fe31378..d96193e 100644 --- a/src/circles/in-top-right.css +++ b/src/circles/in-top-right.css @@ -7,6 +7,6 @@ } } -[transition="in:circle:top-right"] { +[transition-style="in:circle:top-right"] { animation-name: circle-in-top-right; } \ No newline at end of file diff --git a/src/circles/out-bottom-left.css b/src/circles/out-bottom-left.css index cdc1d9a..2ee6e52 100644 --- a/src/circles/out-bottom-left.css +++ b/src/circles/out-bottom-left.css @@ -7,7 +7,7 @@ } } -[transition="out:circle:bottom-left"] { +[transition-style="out:circle:bottom-left"] { --transition__duration: 1.5s; animation-name: circle-out-bottom-left; } \ No newline at end of file diff --git a/src/circles/out-bottom-right.css b/src/circles/out-bottom-right.css index 85df9b1..fab48b5 100644 --- a/src/circles/out-bottom-right.css +++ b/src/circles/out-bottom-right.css @@ -7,7 +7,7 @@ } } -[transition="out:circle:bottom-right"] { +[transition-style="out:circle:bottom-right"] { --transition__duration: 1.5s; animation-name: circle-out-bottom-right; } \ No newline at end of file diff --git a/src/circles/out-center.css b/src/circles/out-center.css index f42c506..f64cfa0 100644 --- a/src/circles/out-center.css +++ b/src/circles/out-center.css @@ -7,6 +7,6 @@ } } -[transition="out:circle:center"] { +[transition-style="out:circle:center"] { animation-name: circle-out-center; } \ No newline at end of file diff --git a/src/circles/out-hesitate.css b/src/circles/out-hesitate.css index 477318e..88e729a 100644 --- a/src/circles/out-hesitate.css +++ b/src/circles/out-hesitate.css @@ -10,6 +10,6 @@ } } -[transition="out:circle:hesitate"] { +[transition-style="out:circle:hesitate"] { animation-name: circle-out-hesitate; } \ No newline at end of file diff --git a/src/circles/out-top-left.css b/src/circles/out-top-left.css index 42c823a..cd6be82 100644 --- a/src/circles/out-top-left.css +++ b/src/circles/out-top-left.css @@ -7,7 +7,7 @@ } } -[transition="out:circle:top-left"] { +[transition-style="out:circle:top-left"] { --transition__duration: 1.5s; animation-name: circle-out-top-left; } \ No newline at end of file diff --git a/src/circles/out-top-right.css b/src/circles/out-top-right.css index e85f874..e842e3d 100644 --- a/src/circles/out-top-right.css +++ b/src/circles/out-top-right.css @@ -7,7 +7,7 @@ } } -[transition="out:circle:top-right"] { +[transition-style="out:circle:top-right"] { --transition__duration: 1.5s; animation-name: circle-out-top-right; } \ No newline at end of file diff --git a/src/polygons/diamond-in-center.css b/src/polygons/diamond-in-center.css index e200dea..148fcd3 100644 --- a/src/polygons/diamond-in-center.css +++ b/src/polygons/diamond-in-center.css @@ -7,7 +7,7 @@ } } -[transition="in:diamond:center"] { +[transition-style="in:diamond:center"] { --transition__duration: 1.5s; animation-name: diamond-in-center; } \ No newline at end of file diff --git a/src/polygons/diamond-in-height-width.css b/src/polygons/diamond-in-height-width.css index 4ba3069..418a9ac 100644 --- a/src/polygons/diamond-in-height-width.css +++ b/src/polygons/diamond-in-height-width.css @@ -10,7 +10,7 @@ } } -[transition="in:diamond:hesitate"] { +[transition-style="in:diamond:hesitate"] { --transition__duration: 1.5s; animation-name: diamond-in-double-scale; } \ No newline at end of file diff --git a/src/polygons/diamond-out-center.css b/src/polygons/diamond-out-center.css index 6b5c546..25e134c 100644 --- a/src/polygons/diamond-out-center.css +++ b/src/polygons/diamond-out-center.css @@ -7,7 +7,7 @@ } } -[transition="out:diamond:center"] { +[transition-style="out:diamond:center"] { --transition__duration: 1.5s; animation-name: diamond-out-center; } \ No newline at end of file diff --git a/src/polygons/diamond-out-height-width.css b/src/polygons/diamond-out-height-width.css index ed2d933..2708731 100644 --- a/src/polygons/diamond-out-height-width.css +++ b/src/polygons/diamond-out-height-width.css @@ -10,7 +10,7 @@ } } -[transition="out:diamond:hesitate"] { +[transition-style="out:diamond:hesitate"] { --transition__duration: 1.5s; animation-name: diamond-out-double-scale; } \ No newline at end of file diff --git a/src/polygons/opposing-corners-in.css b/src/polygons/opposing-corners-in.css index d7a73d6..9441498 100644 --- a/src/polygons/opposing-corners-in.css +++ b/src/polygons/opposing-corners-in.css @@ -7,7 +7,7 @@ } } -[transition="in:polygon:opposing-corners"] { +[transition-style="in:polygon:opposing-corners"] { --transition__duration: 1.5s; animation-name: polygon-in-opposing-corners; } \ No newline at end of file diff --git a/src/polygons/opposing-corners-out.css b/src/polygons/opposing-corners-out.css index 071def2..7b547b9 100644 --- a/src/polygons/opposing-corners-out.css +++ b/src/polygons/opposing-corners-out.css @@ -7,7 +7,7 @@ } } -[transition="out:polygon:opposing-corners"] { +[transition-style="out:polygon:opposing-corners"] { --transition__duration: 1.5s; animation-name: polygon-out-opposing-corners; } \ No newline at end of file diff --git a/src/squares/in-bottom-left.css b/src/squares/in-bottom-left.css index 70703d6..03a401e 100644 --- a/src/squares/in-bottom-left.css +++ b/src/squares/in-bottom-left.css @@ -7,6 +7,6 @@ } } -[transition="in:square:bottom-left"] { +[transition-style="in:square:bottom-left"] { animation-name: square-in-bottom-left; } \ No newline at end of file diff --git a/src/squares/in-bottom-right.css b/src/squares/in-bottom-right.css index 9c439c2..58cb501 100644 --- a/src/squares/in-bottom-right.css +++ b/src/squares/in-bottom-right.css @@ -7,6 +7,6 @@ } } -[transition="in:square:bottom-right"] { +[transition-style="in:square:bottom-right"] { animation-name: square-in-bottom-right; } \ No newline at end of file diff --git a/src/squares/in-center.css b/src/squares/in-center.css index 4ead76b..456a819 100644 --- a/src/squares/in-center.css +++ b/src/squares/in-center.css @@ -7,6 +7,6 @@ } } -[transition="in:square:center"] { +[transition-style="in:square:center"] { animation-name: square-in-center; } \ No newline at end of file diff --git a/src/squares/in-hesitate.css b/src/squares/in-hesitate.css index f2c7901..dec7267 100644 --- a/src/squares/in-hesitate.css +++ b/src/squares/in-hesitate.css @@ -10,6 +10,6 @@ } } -[transition="in:square:hesitate"] { +[transition-style="in:square:hesitate"] { animation-name: square-in-hesitate; } \ No newline at end of file diff --git a/src/squares/in-top-left.css b/src/squares/in-top-left.css index 121c84d..bc96a59 100644 --- a/src/squares/in-top-left.css +++ b/src/squares/in-top-left.css @@ -7,6 +7,6 @@ } } -[transition="in:square:top-left"] { +[transition-style="in:square:top-left"] { animation-name: square-in-top-left; } \ No newline at end of file diff --git a/src/squares/in-top-right.css b/src/squares/in-top-right.css index cef6eed..c5b7f6f 100644 --- a/src/squares/in-top-right.css +++ b/src/squares/in-top-right.css @@ -7,6 +7,6 @@ } } -[transition="in:square:top-right"] { +[transition-style="in:square:top-right"] { animation-name: square-in-top-right; } \ No newline at end of file diff --git a/src/squares/out-bottom-left.css b/src/squares/out-bottom-left.css index 1005f9c..f0a8520 100644 --- a/src/squares/out-bottom-left.css +++ b/src/squares/out-bottom-left.css @@ -7,7 +7,7 @@ } } -[transition="out:square:bottom-left"] { +[transition-style="out:square:bottom-left"] { --transition__duration: 1.5s; animation-name: square-out-bottom-left; } \ No newline at end of file diff --git a/src/squares/out-bottom-right.css b/src/squares/out-bottom-right.css index 4868c7a..e800742 100644 --- a/src/squares/out-bottom-right.css +++ b/src/squares/out-bottom-right.css @@ -7,7 +7,7 @@ } } -[transition="out:square:bottom-right"] { +[transition-style="out:square:bottom-right"] { --transition__duration: 1.5s; animation-name: square-out-bottom-right; } \ No newline at end of file diff --git a/src/squares/out-center.css b/src/squares/out-center.css index 56af939..4060fb7 100644 --- a/src/squares/out-center.css +++ b/src/squares/out-center.css @@ -7,6 +7,6 @@ } } -[transition="out:square:center"] { +[transition-style="out:square:center"] { animation-name: square-out-center; } \ No newline at end of file diff --git a/src/squares/out-hesitate.css b/src/squares/out-hesitate.css index 503d931..2337e9d 100644 --- a/src/squares/out-hesitate.css +++ b/src/squares/out-hesitate.css @@ -10,6 +10,6 @@ } } -[transition="out:square:hesitate"] { +[transition-style="out:square:hesitate"] { animation-name: square-out-hesitate; } \ No newline at end of file diff --git a/src/squares/out-top-left.css b/src/squares/out-top-left.css index 0b704d5..718cb85 100644 --- a/src/squares/out-top-left.css +++ b/src/squares/out-top-left.css @@ -7,7 +7,7 @@ } } -[transition="out:square:top-left"] { +[transition-style="out:square:top-left"] { --transition__duration: 1.5s; animation-name: square-out-top-left; } \ No newline at end of file diff --git a/src/squares/out-top-right.css b/src/squares/out-top-right.css index c64e02f..f166bf3 100644 --- a/src/squares/out-top-right.css +++ b/src/squares/out-top-right.css @@ -7,7 +7,7 @@ } } -[transition="out:square:top-right"] { +[transition-style="out:square:top-right"] { --transition__duration: 1.5s; animation-name: square-out-top-right; } \ No newline at end of file diff --git a/src/wipes/in-bottom-left.css b/src/wipes/in-bottom-left.css index 6fc3067..0b89f5d 100644 --- a/src/wipes/in-bottom-left.css +++ b/src/wipes/in-bottom-left.css @@ -7,6 +7,6 @@ } } -[transition="in:wipe:bottom-left"] { +[transition-style="in:wipe:bottom-left"] { animation-name: wipe-in-bottom-left; } \ No newline at end of file diff --git a/src/wipes/in-bottom-right.css b/src/wipes/in-bottom-right.css index 0154dd1..b8b5ca0 100644 --- a/src/wipes/in-bottom-right.css +++ b/src/wipes/in-bottom-right.css @@ -7,6 +7,6 @@ } } -[transition="in:wipe:bottom-right"] { +[transition-style="in:wipe:bottom-right"] { animation-name: wipe-in-bottom-right; } \ No newline at end of file diff --git a/src/wipes/in-bottom.css b/src/wipes/in-bottom.css index 17dcb80..adcc736 100644 --- a/src/wipes/in-bottom.css +++ b/src/wipes/in-bottom.css @@ -7,7 +7,7 @@ } } -[transition="in:wipe:bottom"], -[transition="in:wipe:up"] { +[transition-style="in:wipe:bottom"], +[transition-style="in:wipe:up"] { animation-name: wipe-in-bottom; } \ No newline at end of file diff --git a/src/wipes/in-left.css b/src/wipes/in-left.css index d0f17b6..3f2135a 100644 --- a/src/wipes/in-left.css +++ b/src/wipes/in-left.css @@ -7,6 +7,6 @@ } } -[transition="in:wipe:left"] { +[transition-style="in:wipe:left"] { animation-name: wipe-in-left; } \ No newline at end of file diff --git a/src/wipes/in-right.css b/src/wipes/in-right.css index 9ba0b1c..2a636ce 100644 --- a/src/wipes/in-right.css +++ b/src/wipes/in-right.css @@ -7,6 +7,6 @@ } } -[transition="in:wipe:right"] { +[transition-style="in:wipe:right"] { animation-name: wipe-in-right; } \ No newline at end of file diff --git a/src/wipes/in-top-left.css b/src/wipes/in-top-left.css index bb8963e..7f7ea16 100644 --- a/src/wipes/in-top-left.css +++ b/src/wipes/in-top-left.css @@ -7,6 +7,6 @@ } } -[transition="in:wipe:top-left"] { +[transition-style="in:wipe:top-left"] { animation-name: wipe-in-top-left; } \ No newline at end of file diff --git a/src/wipes/in-top-right.css b/src/wipes/in-top-right.css index b3bad17..b7dea56 100644 --- a/src/wipes/in-top-right.css +++ b/src/wipes/in-top-right.css @@ -7,6 +7,6 @@ } } -[transition="in:wipe:top-right"] { +[transition-style="in:wipe:top-right"] { animation-name: wipe-in-top-right; } \ No newline at end of file diff --git a/src/wipes/in-top.css b/src/wipes/in-top.css index c6dba2b..3b8b2fd 100644 --- a/src/wipes/in-top.css +++ b/src/wipes/in-top.css @@ -7,7 +7,7 @@ } } -[transition="in:wipe:top"], -[transition="in:wipe:down"] { +[transition-style="in:wipe:top"], +[transition-style="in:wipe:down"] { animation-name: wipe-in-top; } \ No newline at end of file diff --git a/src/wipes/out-bottom-left.css b/src/wipes/out-bottom-left.css index fe77659..4a91bd4 100644 --- a/src/wipes/out-bottom-left.css +++ b/src/wipes/out-bottom-left.css @@ -7,6 +7,6 @@ } } -[transition="out:wipe:bottom-left"] { +[transition-style="out:wipe:bottom-left"] { animation-name: wipe-out-bottom-left; } \ No newline at end of file diff --git a/src/wipes/out-bottom-right.css b/src/wipes/out-bottom-right.css index 00fc8f3..e23fbd9 100644 --- a/src/wipes/out-bottom-right.css +++ b/src/wipes/out-bottom-right.css @@ -7,6 +7,6 @@ } } -[transition="out:wipe:bottom-right"] { +[transition-style="out:wipe:bottom-right"] { animation-name: wipe-out-bottom-right; } \ No newline at end of file diff --git a/src/wipes/out-bottom.css b/src/wipes/out-bottom.css index c72b303..db9d44b 100644 --- a/src/wipes/out-bottom.css +++ b/src/wipes/out-bottom.css @@ -7,7 +7,7 @@ } } -[transition="out:wipe:bottom"], -[transition="out:wipe:down"] { +[transition-style="out:wipe:bottom"], +[transition-style="out:wipe:down"] { animation-name: wipe-out-bottom; } \ No newline at end of file diff --git a/src/wipes/out-left.css b/src/wipes/out-left.css index 50e1b21..7b7c075 100644 --- a/src/wipes/out-left.css +++ b/src/wipes/out-left.css @@ -7,6 +7,6 @@ } } -[transition="out:wipe:left"] { +[transition-style="out:wipe:left"] { animation-name: wipe-out-left; } \ No newline at end of file diff --git a/src/wipes/out-right.css b/src/wipes/out-right.css index 300896e..1240a17 100644 --- a/src/wipes/out-right.css +++ b/src/wipes/out-right.css @@ -7,6 +7,6 @@ } } -[transition="out:wipe:right"] { +[transition-style="out:wipe:right"] { animation-name: wipe-out-right; } \ No newline at end of file diff --git a/src/wipes/out-top-left.css b/src/wipes/out-top-left.css index c121f02..e8dbfa9 100644 --- a/src/wipes/out-top-left.css +++ b/src/wipes/out-top-left.css @@ -7,6 +7,6 @@ } } -[transition="out:wipe:top-left"] { +[transition-style="out:wipe:top-left"] { animation-name: wipe-out-top-left; } \ No newline at end of file diff --git a/src/wipes/out-top-right.css b/src/wipes/out-top-right.css index a9f5423..0e79154 100644 --- a/src/wipes/out-top-right.css +++ b/src/wipes/out-top-right.css @@ -7,6 +7,6 @@ } } -[transition="out:wipe:top-right"] { +[transition-style="out:wipe:top-right"] { animation-name: wipe-out-top-right; } \ No newline at end of file diff --git a/src/wipes/out-top.css b/src/wipes/out-top.css index daea963..e7331be 100644 --- a/src/wipes/out-top.css +++ b/src/wipes/out-top.css @@ -7,7 +7,7 @@ } } -[transition="out:wipe:top"], -[transition="out:wipe:up"] { +[transition-style="out:wipe:top"], +[transition-style="out:wipe:up"] { animation-name: wipe-out-top; } \ No newline at end of file diff --git a/transition.circles.min.css b/transition.circles.min.css index 24a7342..0ee9b11 100644 --- a/transition.circles.min.css +++ b/transition.circles.min.css @@ -1 +1 @@ -[transition]{animation-delay:var(--transition__delay,0);animation-duration:var(--transition__duration,2.5s);animation-timing-function:var(--transition__easing,cubic-bezier(.25,1,.3,1));animation-fill-mode:both;will-change:clip-path}@media (prefers-reduced-motion:reduce),print{[transition]{animation-duration:1ms!important;transition-duration:1ms!important;animation-iteration-count:1!important}}@keyframes circle-in-hesitate{0%{clip-path:var(--circle-center-center-out)}40%{clip-path:var(--circle-hesitate)}to{clip-path:var(--circle-center-center-in)}}[transition="in:circle:hesitate"]{animation-name:circle-in-hesitate}@keyframes circle-out-hesitate{0%{clip-path:var(--circle-center-center-in)}40%{clip-path:var(--circle-hesitate)}to{clip-path:var(--circle-center-center-out)}}[transition="out:circle:hesitate"]{animation-name:circle-out-hesitate}@keyframes circle-in-center{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-center-center-in)}}[transition="in:circle:center"]{animation-name:circle-in-center}@keyframes circle-out-center{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-center-center-out)}}[transition="out:circle:center"]{animation-name:circle-out-center}@keyframes circle-out-top-left{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-top-left-out)}}[transition="out:circle:top-left"]{--transition__duration:1.5s;animation-name:circle-out-top-left}@keyframes circle-out-top-right{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-top-right-out)}}[transition="out:circle:top-right"]{--transition__duration:1.5s;animation-name:circle-out-top-right}@keyframes circle-out-bottom-left{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-bottom-left-out)}}[transition="out:circle:bottom-left"]{--transition__duration:1.5s;animation-name:circle-out-bottom-left}@keyframes circle-out-bottom-right{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-bottom-right-out)}}[transition="out:circle:bottom-right"]{--transition__duration:1.5s;animation-name:circle-out-bottom-right}@keyframes circle-in-top-left{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-top-left-in)}}[transition="in:circle:top-left"]{animation-name:circle-in-top-left}@keyframes circle-in-top-right{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-top-right-in)}}[transition="in:circle:top-right"]{animation-name:circle-in-top-right}@keyframes circle-in-bottom-left{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-bottom-left-in)}}[transition="in:circle:bottom-left"]{animation-name:circle-in-bottom-left}@keyframes circle-in-bottom-right{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-bottom-right-in)}}[transition="in:circle:bottom-right"]{animation-name:circle-in-bottom-right} \ No newline at end of file +[transition-style]{animation-delay:var(--transition__delay,0);animation-duration:var(--transition__duration,2.5s);animation-timing-function:var(--transition__easing,cubic-bezier(.25,1,.3,1));animation-fill-mode:both;will-change:clip-path}@media (prefers-reduced-motion:reduce),print{[transition-style]{animation-duration:1ms!important;transition-duration:1ms!important;animation-iteration-count:1!important}}@keyframes circle-in-hesitate{0%{clip-path:var(--circle-center-center-out)}40%{clip-path:var(--circle-hesitate)}to{clip-path:var(--circle-center-center-in)}}[transition-style="in:circle:hesitate"]{animation-name:circle-in-hesitate}@keyframes circle-out-hesitate{0%{clip-path:var(--circle-center-center-in)}40%{clip-path:var(--circle-hesitate)}to{clip-path:var(--circle-center-center-out)}}[transition-style="out:circle:hesitate"]{animation-name:circle-out-hesitate}@keyframes circle-in-center{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-center-center-in)}}[transition-style="in:circle:center"]{animation-name:circle-in-center}@keyframes circle-out-center{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-center-center-out)}}[transition-style="out:circle:center"]{animation-name:circle-out-center}@keyframes circle-out-top-left{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-top-left-out)}}[transition-style="out:circle:top-left"]{--transition__duration:1.5s;animation-name:circle-out-top-left}@keyframes circle-out-top-right{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-top-right-out)}}[transition-style="out:circle:top-right"]{--transition__duration:1.5s;animation-name:circle-out-top-right}@keyframes circle-out-bottom-left{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-bottom-left-out)}}[transition-style="out:circle:bottom-left"]{--transition__duration:1.5s;animation-name:circle-out-bottom-left}@keyframes circle-out-bottom-right{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-bottom-right-out)}}[transition-style="out:circle:bottom-right"]{--transition__duration:1.5s;animation-name:circle-out-bottom-right}@keyframes circle-in-top-left{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-top-left-in)}}[transition-style="in:circle:top-left"]{animation-name:circle-in-top-left}@keyframes circle-in-top-right{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-top-right-in)}}[transition-style="in:circle:top-right"]{animation-name:circle-in-top-right}@keyframes circle-in-bottom-left{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-bottom-left-in)}}[transition-style="in:circle:bottom-left"]{animation-name:circle-in-bottom-left}@keyframes circle-in-bottom-right{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-bottom-right-in)}}[transition-style="in:circle:bottom-right"]{animation-name:circle-in-bottom-right} \ No newline at end of file diff --git a/transition.hackpack.min.css b/transition.hackpack.min.css index 175b181..93927f4 100644 --- a/transition.hackpack.min.css +++ b/transition.hackpack.min.css @@ -1 +1 @@ -:root{--circle-center-center-out:circle(0%);--circle-center-center-in:circle(125%);--circle-hesitate:circle(40%);--circle-top-left-out:circle(0% at top left);--circle-top-right-out:circle(0% at top right);--circle-bottom-right-out:circle(0% at bottom right);--circle-bottom-left-out:circle(0% at bottom left);--circle-top-left-in:circle(150% at top left);--circle-top-right-in:circle(150% at top right);--circle-bottom-right-in:circle(150% at bottom right);--circle-bottom-left-in:circle(150% at bottom left);--wipe-in:inset(0 0 0 0);--wipe-bottom:inset(100% 0 0 0);--wipe-left:inset(0 100% 0 0);--wipe-top:inset(0 0 100% 0);--wipe-right:inset(0 0 0 100%);--wipe-top-left-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-top-right-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-bottom-left-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-bottom-right-in:polygon(-50% 0%,200% 0,0 200%,0 -50%);--wipe-top-left-out:polygon(0 0,0 0,0 0,0 50%);--wipe-top-right-out:polygon(50% -50%,150% 50%,150% 50%,50% -50%);--wipe-bottom-left-out:polygon(-50% 50%,50% 150%,50% 150%,-50% 50%);--wipe-bottom-right-out:polygon(150% 50%,150% 50%,50% 150%,50% 150%);--square-hesitate:inset(33% 33% 33% 33%);--square-out:inset(100% 100% 100% 100%);--square-in:var(--wipe-in);--square-top-left-out:inset(0 100% 100% 0);--square-top-right-out:inset(0 0 100% 100%);--square-bottom-left-out:inset(100% 100% 0 0);--square-bottom-right-out:inset(100% 0 0 100%);--diamond-center-in:polygon(-50% 50%,50% -50%,150% 50%,50% 150%);--diamond-center-out:polygon(50% 50%,50% 50%,50% 50%,50% 50%);--diamond-hesitate:polygon(45% 50%,50% 25%,55% 50%,50% 75%);--opposing-corners-in:polygon(0 0,0 100%,100% 100%,100% 0);--opposing-corners-out:polygon(0 0,50% 50%,100% 100%,50% 50%)}[transition]{animation-delay:var(--transition__delay,0);animation-duration:var(--transition__duration,2.5s);animation-timing-function:var(--transition__easing,cubic-bezier(.25,1,.3,1));animation-fill-mode:both;will-change:clip-path}@media (prefers-reduced-motion:reduce),print{[transition]{animation-duration:1ms!important;transition-duration:1ms!important;animation-iteration-count:1!important}} \ No newline at end of file +:root{--circle-center-center-out:circle(0%);--circle-center-center-in:circle(125%);--circle-hesitate:circle(40%);--circle-top-left-out:circle(0% at top left);--circle-top-right-out:circle(0% at top right);--circle-bottom-right-out:circle(0% at bottom right);--circle-bottom-left-out:circle(0% at bottom left);--circle-top-left-in:circle(150% at top left);--circle-top-right-in:circle(150% at top right);--circle-bottom-right-in:circle(150% at bottom right);--circle-bottom-left-in:circle(150% at bottom left);--wipe-in:inset(0 0 0 0);--wipe-bottom:inset(100% 0 0 0);--wipe-left:inset(0 100% 0 0);--wipe-top:inset(0 0 100% 0);--wipe-right:inset(0 0 0 100%);--wipe-top-left-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-top-right-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-bottom-left-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-bottom-right-in:polygon(-50% 0%,200% 0,0 200%,0 -50%);--wipe-top-left-out:polygon(0 0,0 0,0 0,0 50%);--wipe-top-right-out:polygon(50% -50%,150% 50%,150% 50%,50% -50%);--wipe-bottom-left-out:polygon(-50% 50%,50% 150%,50% 150%,-50% 50%);--wipe-bottom-right-out:polygon(150% 50%,150% 50%,50% 150%,50% 150%);--square-hesitate:inset(33% 33% 33% 33%);--square-out:inset(100% 100% 100% 100%);--square-in:var(--wipe-in);--square-top-left-out:inset(0 100% 100% 0);--square-top-right-out:inset(0 0 100% 100%);--square-bottom-left-out:inset(100% 100% 0 0);--square-bottom-right-out:inset(100% 0 0 100%);--diamond-center-in:polygon(-50% 50%,50% -50%,150% 50%,50% 150%);--diamond-center-out:polygon(50% 50%,50% 50%,50% 50%,50% 50%);--diamond-hesitate:polygon(45% 50%,50% 25%,55% 50%,50% 75%);--opposing-corners-in:polygon(0 0,0 100%,100% 100%,100% 0);--opposing-corners-out:polygon(0 0,50% 50%,100% 100%,50% 50%)}[transition-style]{animation-delay:var(--transition__delay,0);animation-duration:var(--transition__duration,2.5s);animation-timing-function:var(--transition__easing,cubic-bezier(.25,1,.3,1));animation-fill-mode:both;will-change:clip-path}@media (prefers-reduced-motion:reduce),print{[transition-style]{animation-duration:1ms!important;transition-duration:1ms!important;animation-iteration-count:1!important}} \ No newline at end of file diff --git a/transition.min.css b/transition.min.css index 233fdca..ef73acb 100644 --- a/transition.min.css +++ b/transition.min.css @@ -1 +1 @@ -:root{--circle-center-center-out:circle(0%);--circle-center-center-in:circle(125%);--circle-hesitate:circle(40%);--circle-top-left-out:circle(0% at top left);--circle-top-right-out:circle(0% at top right);--circle-bottom-right-out:circle(0% at bottom right);--circle-bottom-left-out:circle(0% at bottom left);--circle-top-left-in:circle(150% at top left);--circle-top-right-in:circle(150% at top right);--circle-bottom-right-in:circle(150% at bottom right);--circle-bottom-left-in:circle(150% at bottom left);--wipe-in:inset(0 0 0 0);--wipe-bottom:inset(100% 0 0 0);--wipe-left:inset(0 100% 0 0);--wipe-top:inset(0 0 100% 0);--wipe-right:inset(0 0 0 100%);--wipe-top-left-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-top-right-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-bottom-left-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-bottom-right-in:polygon(-50% 0%,200% 0,0 200%,0 -50%);--wipe-top-left-out:polygon(0 0,0 0,0 0,0 50%);--wipe-top-right-out:polygon(50% -50%,150% 50%,150% 50%,50% -50%);--wipe-bottom-left-out:polygon(-50% 50%,50% 150%,50% 150%,-50% 50%);--wipe-bottom-right-out:polygon(150% 50%,150% 50%,50% 150%,50% 150%);--square-hesitate:inset(33% 33% 33% 33%);--square-out:inset(100% 100% 100% 100%);--square-in:var(--wipe-in);--square-top-left-out:inset(0 100% 100% 0);--square-top-right-out:inset(0 0 100% 100%);--square-bottom-left-out:inset(100% 100% 0 0);--square-bottom-right-out:inset(100% 0 0 100%);--diamond-center-in:polygon(-50% 50%,50% -50%,150% 50%,50% 150%);--diamond-center-out:polygon(50% 50%,50% 50%,50% 50%,50% 50%);--diamond-hesitate:polygon(45% 50%,50% 25%,55% 50%,50% 75%);--opposing-corners-in:polygon(0 0,0 100%,100% 100%,100% 0);--opposing-corners-out:polygon(0 0,50% 50%,100% 100%,50% 50%)}[transition]{animation-delay:var(--transition__delay,0);animation-duration:var(--transition__duration,2.5s);animation-timing-function:var(--transition__easing,cubic-bezier(.25,1,.3,1));animation-fill-mode:both;will-change:clip-path}@media (prefers-reduced-motion:reduce),print{[transition]{animation-duration:1ms!important;transition-duration:1ms!important;animation-iteration-count:1!important}}@keyframes wipe-out-top{0%{clip-path:var(--wipe-in)}to{clip-path:var(--wipe-top)}}[transition="out:wipe:top"],[transition="out:wipe:up"]{animation-name:wipe-out-top}@keyframes wipe-out-right{0%{clip-path:var(--wipe-in)}to{clip-path:var(--wipe-right)}}[transition="out:wipe:right"]{animation-name:wipe-out-right}@keyframes wipe-out-bottom{0%{clip-path:var(--wipe-in)}to{clip-path:var(--wipe-bottom)}}[transition="out:wipe:bottom"],[transition="out:wipe:down"]{animation-name:wipe-out-bottom}@keyframes wipe-out-left{0%{clip-path:var(--wipe-in)}to{clip-path:var(--wipe-left)}}[transition="out:wipe:left"]{animation-name:wipe-out-left}@keyframes wipe-in-top{0%{clip-path:var(--wipe-top)}to{clip-path:var(--wipe-in)}}[transition="in:wipe:down"],[transition="in:wipe:top"]{animation-name:wipe-in-top}@keyframes wipe-in-right{0%{clip-path:var(--wipe-left)}to{clip-path:var(--wipe-in)}}[transition="in:wipe:right"]{animation-name:wipe-in-right}@keyframes wipe-in-bottom{0%{clip-path:var(--wipe-bottom)}to{clip-path:var(--wipe-in)}}[transition="in:wipe:bottom"],[transition="in:wipe:up"]{animation-name:wipe-in-bottom}@keyframes wipe-in-left{0%{clip-path:var(--wipe-right)}to{clip-path:var(--wipe-in)}}[transition="in:wipe:left"]{animation-name:wipe-in-left}@keyframes wipe-in-top-right{0%{clip-path:var(--wipe-bottom-left-out)}to{clip-path:var(--wipe-top-right-in)}}[transition="in:wipe:top-right"]{animation-name:wipe-in-top-right}@keyframes wipe-in-top-left{0%{clip-path:var(--wipe-bottom-right-out)}to{clip-path:var(--wipe-top-left-in)}}[transition="in:wipe:top-left"]{animation-name:wipe-in-top-left}@keyframes wipe-in-bottom-right{0%{clip-path:var(--wipe-top-left-out)}to{clip-path:var(--wipe-bottom-right-in)}}[transition="in:wipe:bottom-right"]{animation-name:wipe-in-bottom-right}@keyframes wipe-in-bottom-left{0%{clip-path:var(--wipe-top-right-out)}to{clip-path:var(--wipe-bottom-left-in)}}[transition="in:wipe:bottom-left"]{animation-name:wipe-in-bottom-left}@keyframes wipe-out-top-right{0%{clip-path:var(--wipe-bottom-left-in)}to{clip-path:var(--wipe-top-right-out)}}[transition="out:wipe:top-right"]{animation-name:wipe-out-top-right}@keyframes wipe-out-top-left{0%{clip-path:var(--wipe-bottom-right-in)}to{clip-path:var(--wipe-top-left-out)}}[transition="out:wipe:top-left"]{animation-name:wipe-out-top-left}@keyframes wipe-out-bottom-right{0%{clip-path:var(--wipe-top-left-in)}to{clip-path:var(--wipe-bottom-right-out)}}[transition="out:wipe:bottom-right"]{animation-name:wipe-out-bottom-right}@keyframes wipe-out-bottom-left{0%{clip-path:var(--wipe-top-right-in)}to{clip-path:var(--wipe-bottom-left-out)}}[transition="out:wipe:bottom-left"]{animation-name:wipe-out-bottom-left}@keyframes circle-in-hesitate{0%{clip-path:var(--circle-center-center-out)}40%{clip-path:var(--circle-hesitate)}to{clip-path:var(--circle-center-center-in)}}[transition="in:circle:hesitate"]{animation-name:circle-in-hesitate}@keyframes circle-out-hesitate{0%{clip-path:var(--circle-center-center-in)}40%{clip-path:var(--circle-hesitate)}to{clip-path:var(--circle-center-center-out)}}[transition="out:circle:hesitate"]{animation-name:circle-out-hesitate}@keyframes circle-in-center{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-center-center-in)}}[transition="in:circle:center"]{animation-name:circle-in-center}@keyframes circle-out-center{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-center-center-out)}}[transition="out:circle:center"]{animation-name:circle-out-center}@keyframes circle-out-top-left{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-top-left-out)}}[transition="out:circle:top-left"]{--transition__duration:1.5s;animation-name:circle-out-top-left}@keyframes circle-out-top-right{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-top-right-out)}}[transition="out:circle:top-right"]{--transition__duration:1.5s;animation-name:circle-out-top-right}@keyframes circle-out-bottom-left{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-bottom-left-out)}}[transition="out:circle:bottom-left"]{--transition__duration:1.5s;animation-name:circle-out-bottom-left}@keyframes circle-out-bottom-right{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-bottom-right-out)}}[transition="out:circle:bottom-right"]{--transition__duration:1.5s;animation-name:circle-out-bottom-right}@keyframes circle-in-top-left{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-top-left-in)}}[transition="in:circle:top-left"]{animation-name:circle-in-top-left}@keyframes circle-in-top-right{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-top-right-in)}}[transition="in:circle:top-right"]{animation-name:circle-in-top-right}@keyframes circle-in-bottom-left{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-bottom-left-in)}}[transition="in:circle:bottom-left"]{animation-name:circle-in-bottom-left}@keyframes circle-in-bottom-right{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-bottom-right-in)}}[transition="in:circle:bottom-right"]{animation-name:circle-in-bottom-right}@keyframes square-in-hesitate{0%{clip-path:var(--square-out)}40%{clip-path:var(--square-hesitate)}to{clip-path:var(--square-in)}}[transition="in:square:hesitate"]{animation-name:square-in-hesitate}@keyframes square-out-hesitate{0%{clip-path:var(--square-in)}40%{clip-path:var(--square-hesitate)}to{clip-path:var(--square-out)}}[transition="out:square:hesitate"]{animation-name:square-out-hesitate}@keyframes square-in-center{0%{clip-path:var(--square-out)}to{clip-path:var(--square-in)}}[transition="in:square:center"]{animation-name:square-in-center}@keyframes square-out-center{0%{clip-path:var(--square-in)}to{clip-path:var(--square-out)}}[transition="out:square:center"]{animation-name:square-out-center}@keyframes square-out-top-left{0%{clip-path:var(--square-in)}to{clip-path:var(--square-top-left-out)}}[transition="out:square:top-left"]{--transition__duration:1.5s;animation-name:square-out-top-left}@keyframes square-out-top-right{0%{clip-path:var(--square-in)}to{clip-path:var(--square-top-right-out)}}[transition="out:square:top-right"]{--transition__duration:1.5s;animation-name:square-out-top-right}@keyframes square-out-bottom-left{0%{clip-path:var(--square-in)}to{clip-path:var(--square-bottom-left-out)}}[transition="out:square:bottom-left"]{--transition__duration:1.5s;animation-name:square-out-bottom-left}@keyframes square-out-bottom-right{0%{clip-path:var(--square-in)}to{clip-path:var(--square-bottom-right-out)}}[transition="out:square:bottom-right"]{--transition__duration:1.5s;animation-name:square-out-bottom-right}@keyframes square-in-top-left{0%{clip-path:var(--square-bottom-right-out)}to{clip-path:var(--square-in)}}[transition="in:square:top-left"]{animation-name:square-in-top-left}@keyframes square-in-top-right{0%{clip-path:var(--square-bottom-left-out)}to{clip-path:var(--square-in)}}[transition="in:square:top-right"]{animation-name:square-in-top-right}@keyframes square-in-bottom-left{0%{clip-path:var(--square-top-right-out)}to{clip-path:var(--square-in)}}[transition="in:square:bottom-left"]{animation-name:square-in-bottom-left}@keyframes square-in-bottom-right{0%{clip-path:var(--square-top-left-out)}to{clip-path:var(--square-in)}}[transition="in:square:bottom-right"]{animation-name:square-in-bottom-right}@keyframes polygon-in-opposing-corners{0%{clip-path:var(--opposing-corners-out)}to{clip-path:var(--opposing-corners-in)}}[transition="in:polygon:opposing-corners"]{--transition__duration:1.5s;animation-name:polygon-in-opposing-corners}@keyframes polygon-out-opposing-corners{0%{clip-path:var(--opposing-corners-in)}to{clip-path:var(--opposing-corners-out)}}[transition="out:polygon:opposing-corners"]{--transition__duration:1.5s;animation-name:polygon-out-opposing-corners}@keyframes diamond-in-center{0%{clip-path:var(--diamond-center-out)}to{clip-path:var(--diamond-center-in)}}[transition="in:diamond:center"]{--transition__duration:1.5s;animation-name:diamond-in-center}@keyframes diamond-out-center{0%{clip-path:var(--diamond-center-in)}to{clip-path:var(--diamond-center-out)}}[transition="out:diamond:center"]{--transition__duration:1.5s;animation-name:diamond-out-center}@keyframes diamond-in-double-scale{0%{clip-path:var(--diamond-center-out)}40%{clip-path:var(--diamond-hesitate)}to{clip-path:var(--diamond-center-in)}}[transition="in:diamond:hesitate"]{--transition__duration:1.5s;animation-name:diamond-in-double-scale}@keyframes diamond-out-double-scale{0%{clip-path:var(--diamond-center-in)}40%{clip-path:var(--diamond-hesitate)}to{clip-path:var(--diamond-center-out)}}[transition="out:diamond:hesitate"]{--transition__duration:1.5s;animation-name:diamond-out-double-scale} \ No newline at end of file +:root{--circle-center-center-out:circle(0%);--circle-center-center-in:circle(125%);--circle-hesitate:circle(40%);--circle-top-left-out:circle(0% at top left);--circle-top-right-out:circle(0% at top right);--circle-bottom-right-out:circle(0% at bottom right);--circle-bottom-left-out:circle(0% at bottom left);--circle-top-left-in:circle(150% at top left);--circle-top-right-in:circle(150% at top right);--circle-bottom-right-in:circle(150% at bottom right);--circle-bottom-left-in:circle(150% at bottom left);--wipe-in:inset(0 0 0 0);--wipe-bottom:inset(100% 0 0 0);--wipe-left:inset(0 100% 0 0);--wipe-top:inset(0 0 100% 0);--wipe-right:inset(0 0 0 100%);--wipe-top-left-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-top-right-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-bottom-left-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-bottom-right-in:polygon(-50% 0%,200% 0,0 200%,0 -50%);--wipe-top-left-out:polygon(0 0,0 0,0 0,0 50%);--wipe-top-right-out:polygon(50% -50%,150% 50%,150% 50%,50% -50%);--wipe-bottom-left-out:polygon(-50% 50%,50% 150%,50% 150%,-50% 50%);--wipe-bottom-right-out:polygon(150% 50%,150% 50%,50% 150%,50% 150%);--square-hesitate:inset(33% 33% 33% 33%);--square-out:inset(100% 100% 100% 100%);--square-in:var(--wipe-in);--square-top-left-out:inset(0 100% 100% 0);--square-top-right-out:inset(0 0 100% 100%);--square-bottom-left-out:inset(100% 100% 0 0);--square-bottom-right-out:inset(100% 0 0 100%);--diamond-center-in:polygon(-50% 50%,50% -50%,150% 50%,50% 150%);--diamond-center-out:polygon(50% 50%,50% 50%,50% 50%,50% 50%);--diamond-hesitate:polygon(45% 50%,50% 25%,55% 50%,50% 75%);--opposing-corners-in:polygon(0 0,0 100%,100% 100%,100% 0);--opposing-corners-out:polygon(0 0,50% 50%,100% 100%,50% 50%)}[transition-style]{animation-delay:var(--transition__delay,0);animation-duration:var(--transition__duration,2.5s);animation-timing-function:var(--transition__easing,cubic-bezier(.25,1,.3,1));animation-fill-mode:both;will-change:clip-path}@media (prefers-reduced-motion:reduce),print{[transition-style]{animation-duration:1ms!important;transition-duration:1ms!important;animation-iteration-count:1!important}}@keyframes wipe-out-top{0%{clip-path:var(--wipe-in)}to{clip-path:var(--wipe-top)}}[transition-style="out:wipe:top"],[transition-style="out:wipe:up"]{animation-name:wipe-out-top}@keyframes wipe-out-right{0%{clip-path:var(--wipe-in)}to{clip-path:var(--wipe-right)}}[transition-style="out:wipe:right"]{animation-name:wipe-out-right}@keyframes wipe-out-bottom{0%{clip-path:var(--wipe-in)}to{clip-path:var(--wipe-bottom)}}[transition-style="out:wipe:bottom"],[transition-style="out:wipe:down"]{animation-name:wipe-out-bottom}@keyframes wipe-out-left{0%{clip-path:var(--wipe-in)}to{clip-path:var(--wipe-left)}}[transition-style="out:wipe:left"]{animation-name:wipe-out-left}@keyframes wipe-in-top{0%{clip-path:var(--wipe-top)}to{clip-path:var(--wipe-in)}}[transition-style="in:wipe:down"],[transition-style="in:wipe:top"]{animation-name:wipe-in-top}@keyframes wipe-in-right{0%{clip-path:var(--wipe-left)}to{clip-path:var(--wipe-in)}}[transition-style="in:wipe:right"]{animation-name:wipe-in-right}@keyframes wipe-in-bottom{0%{clip-path:var(--wipe-bottom)}to{clip-path:var(--wipe-in)}}[transition-style="in:wipe:bottom"],[transition-style="in:wipe:up"]{animation-name:wipe-in-bottom}@keyframes wipe-in-left{0%{clip-path:var(--wipe-right)}to{clip-path:var(--wipe-in)}}[transition-style="in:wipe:left"]{animation-name:wipe-in-left}@keyframes wipe-in-top-right{0%{clip-path:var(--wipe-bottom-left-out)}to{clip-path:var(--wipe-top-right-in)}}[transition-style="in:wipe:top-right"]{animation-name:wipe-in-top-right}@keyframes wipe-in-top-left{0%{clip-path:var(--wipe-bottom-right-out)}to{clip-path:var(--wipe-top-left-in)}}[transition-style="in:wipe:top-left"]{animation-name:wipe-in-top-left}@keyframes wipe-in-bottom-right{0%{clip-path:var(--wipe-top-left-out)}to{clip-path:var(--wipe-bottom-right-in)}}[transition-style="in:wipe:bottom-right"]{animation-name:wipe-in-bottom-right}@keyframes wipe-in-bottom-left{0%{clip-path:var(--wipe-top-right-out)}to{clip-path:var(--wipe-bottom-left-in)}}[transition-style="in:wipe:bottom-left"]{animation-name:wipe-in-bottom-left}@keyframes wipe-out-top-right{0%{clip-path:var(--wipe-bottom-left-in)}to{clip-path:var(--wipe-top-right-out)}}[transition-style="out:wipe:top-right"]{animation-name:wipe-out-top-right}@keyframes wipe-out-top-left{0%{clip-path:var(--wipe-bottom-right-in)}to{clip-path:var(--wipe-top-left-out)}}[transition-style="out:wipe:top-left"]{animation-name:wipe-out-top-left}@keyframes wipe-out-bottom-right{0%{clip-path:var(--wipe-top-left-in)}to{clip-path:var(--wipe-bottom-right-out)}}[transition-style="out:wipe:bottom-right"]{animation-name:wipe-out-bottom-right}@keyframes wipe-out-bottom-left{0%{clip-path:var(--wipe-top-right-in)}to{clip-path:var(--wipe-bottom-left-out)}}[transition-style="out:wipe:bottom-left"]{animation-name:wipe-out-bottom-left}@keyframes circle-in-hesitate{0%{clip-path:var(--circle-center-center-out)}40%{clip-path:var(--circle-hesitate)}to{clip-path:var(--circle-center-center-in)}}[transition-style="in:circle:hesitate"]{animation-name:circle-in-hesitate}@keyframes circle-out-hesitate{0%{clip-path:var(--circle-center-center-in)}40%{clip-path:var(--circle-hesitate)}to{clip-path:var(--circle-center-center-out)}}[transition-style="out:circle:hesitate"]{animation-name:circle-out-hesitate}@keyframes circle-in-center{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-center-center-in)}}[transition-style="in:circle:center"]{animation-name:circle-in-center}@keyframes circle-out-center{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-center-center-out)}}[transition-style="out:circle:center"]{animation-name:circle-out-center}@keyframes circle-out-top-left{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-top-left-out)}}[transition-style="out:circle:top-left"]{--transition__duration:1.5s;animation-name:circle-out-top-left}@keyframes circle-out-top-right{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-top-right-out)}}[transition-style="out:circle:top-right"]{--transition__duration:1.5s;animation-name:circle-out-top-right}@keyframes circle-out-bottom-left{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-bottom-left-out)}}[transition-style="out:circle:bottom-left"]{--transition__duration:1.5s;animation-name:circle-out-bottom-left}@keyframes circle-out-bottom-right{0%{clip-path:var(--circle-center-center-in)}to{clip-path:var(--circle-bottom-right-out)}}[transition-style="out:circle:bottom-right"]{--transition__duration:1.5s;animation-name:circle-out-bottom-right}@keyframes circle-in-top-left{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-top-left-in)}}[transition-style="in:circle:top-left"]{animation-name:circle-in-top-left}@keyframes circle-in-top-right{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-top-right-in)}}[transition-style="in:circle:top-right"]{animation-name:circle-in-top-right}@keyframes circle-in-bottom-left{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-bottom-left-in)}}[transition-style="in:circle:bottom-left"]{animation-name:circle-in-bottom-left}@keyframes circle-in-bottom-right{0%{clip-path:var(--circle-center-center-out)}to{clip-path:var(--circle-bottom-right-in)}}[transition-style="in:circle:bottom-right"]{animation-name:circle-in-bottom-right}@keyframes square-in-hesitate{0%{clip-path:var(--square-out)}40%{clip-path:var(--square-hesitate)}to{clip-path:var(--square-in)}}[transition-style="in:square:hesitate"]{animation-name:square-in-hesitate}@keyframes square-out-hesitate{0%{clip-path:var(--square-in)}40%{clip-path:var(--square-hesitate)}to{clip-path:var(--square-out)}}[transition-style="out:square:hesitate"]{animation-name:square-out-hesitate}@keyframes square-in-center{0%{clip-path:var(--square-out)}to{clip-path:var(--square-in)}}[transition-style="in:square:center"]{animation-name:square-in-center}@keyframes square-out-center{0%{clip-path:var(--square-in)}to{clip-path:var(--square-out)}}[transition-style="out:square:center"]{animation-name:square-out-center}@keyframes square-out-top-left{0%{clip-path:var(--square-in)}to{clip-path:var(--square-top-left-out)}}[transition-style="out:square:top-left"]{--transition__duration:1.5s;animation-name:square-out-top-left}@keyframes square-out-top-right{0%{clip-path:var(--square-in)}to{clip-path:var(--square-top-right-out)}}[transition-style="out:square:top-right"]{--transition__duration:1.5s;animation-name:square-out-top-right}@keyframes square-out-bottom-left{0%{clip-path:var(--square-in)}to{clip-path:var(--square-bottom-left-out)}}[transition-style="out:square:bottom-left"]{--transition__duration:1.5s;animation-name:square-out-bottom-left}@keyframes square-out-bottom-right{0%{clip-path:var(--square-in)}to{clip-path:var(--square-bottom-right-out)}}[transition-style="out:square:bottom-right"]{--transition__duration:1.5s;animation-name:square-out-bottom-right}@keyframes square-in-top-left{0%{clip-path:var(--square-bottom-right-out)}to{clip-path:var(--square-in)}}[transition-style="in:square:top-left"]{animation-name:square-in-top-left}@keyframes square-in-top-right{0%{clip-path:var(--square-bottom-left-out)}to{clip-path:var(--square-in)}}[transition-style="in:square:top-right"]{animation-name:square-in-top-right}@keyframes square-in-bottom-left{0%{clip-path:var(--square-top-right-out)}to{clip-path:var(--square-in)}}[transition-style="in:square:bottom-left"]{animation-name:square-in-bottom-left}@keyframes square-in-bottom-right{0%{clip-path:var(--square-top-left-out)}to{clip-path:var(--square-in)}}[transition-style="in:square:bottom-right"]{animation-name:square-in-bottom-right}@keyframes polygon-in-opposing-corners{0%{clip-path:var(--opposing-corners-out)}to{clip-path:var(--opposing-corners-in)}}[transition-style="in:polygon:opposing-corners"]{--transition__duration:1.5s;animation-name:polygon-in-opposing-corners}@keyframes polygon-out-opposing-corners{0%{clip-path:var(--opposing-corners-in)}to{clip-path:var(--opposing-corners-out)}}[transition-style="out:polygon:opposing-corners"]{--transition__duration:1.5s;animation-name:polygon-out-opposing-corners}@keyframes diamond-in-center{0%{clip-path:var(--diamond-center-out)}to{clip-path:var(--diamond-center-in)}}[transition-style="in:diamond:center"]{--transition__duration:1.5s;animation-name:diamond-in-center}@keyframes diamond-out-center{0%{clip-path:var(--diamond-center-in)}to{clip-path:var(--diamond-center-out)}}[transition-style="out:diamond:center"]{--transition__duration:1.5s;animation-name:diamond-out-center}@keyframes diamond-in-double-scale{0%{clip-path:var(--diamond-center-out)}40%{clip-path:var(--diamond-hesitate)}to{clip-path:var(--diamond-center-in)}}[transition-style="in:diamond:hesitate"]{--transition__duration:1.5s;animation-name:diamond-in-double-scale}@keyframes diamond-out-double-scale{0%{clip-path:var(--diamond-center-in)}40%{clip-path:var(--diamond-hesitate)}to{clip-path:var(--diamond-center-out)}}[transition-style="out:diamond:hesitate"]{--transition__duration:1.5s;animation-name:diamond-out-double-scale} \ No newline at end of file diff --git a/transition.polygons.min.css b/transition.polygons.min.css index b5f65d8..68fa54d 100644 --- a/transition.polygons.min.css +++ b/transition.polygons.min.css @@ -1 +1 @@ -[transition]{animation-delay:var(--transition__delay,0);animation-duration:var(--transition__duration,2.5s);animation-timing-function:var(--transition__easing,cubic-bezier(.25,1,.3,1));animation-fill-mode:both;will-change:clip-path}@media (prefers-reduced-motion:reduce),print{[transition]{animation-duration:1ms!important;transition-duration:1ms!important;animation-iteration-count:1!important}}@keyframes polygon-in-opposing-corners{0%{clip-path:var(--opposing-corners-out)}to{clip-path:var(--opposing-corners-in)}}[transition="in:polygon:opposing-corners"]{--transition__duration:1.5s;animation-name:polygon-in-opposing-corners}@keyframes polygon-out-opposing-corners{0%{clip-path:var(--opposing-corners-in)}to{clip-path:var(--opposing-corners-out)}}[transition="out:polygon:opposing-corners"]{--transition__duration:1.5s;animation-name:polygon-out-opposing-corners}@keyframes diamond-in-center{0%{clip-path:var(--diamond-center-out)}to{clip-path:var(--diamond-center-in)}}[transition="in:diamond:center"]{--transition__duration:1.5s;animation-name:diamond-in-center}@keyframes diamond-out-center{0%{clip-path:var(--diamond-center-in)}to{clip-path:var(--diamond-center-out)}}[transition="out:diamond:center"]{--transition__duration:1.5s;animation-name:diamond-out-center}@keyframes diamond-in-double-scale{0%{clip-path:var(--diamond-center-out)}40%{clip-path:var(--diamond-hesitate)}to{clip-path:var(--diamond-center-in)}}[transition="in:diamond:hesitate"]{--transition__duration:1.5s;animation-name:diamond-in-double-scale}@keyframes diamond-out-double-scale{0%{clip-path:var(--diamond-center-in)}40%{clip-path:var(--diamond-hesitate)}to{clip-path:var(--diamond-center-out)}}[transition="out:diamond:hesitate"]{--transition__duration:1.5s;animation-name:diamond-out-double-scale} \ No newline at end of file +[transition-style]{animation-delay:var(--transition__delay,0);animation-duration:var(--transition__duration,2.5s);animation-timing-function:var(--transition__easing,cubic-bezier(.25,1,.3,1));animation-fill-mode:both;will-change:clip-path}@media (prefers-reduced-motion:reduce),print{[transition-style]{animation-duration:1ms!important;transition-duration:1ms!important;animation-iteration-count:1!important}}@keyframes polygon-in-opposing-corners{0%{clip-path:var(--opposing-corners-out)}to{clip-path:var(--opposing-corners-in)}}[transition-style="in:polygon:opposing-corners"]{--transition__duration:1.5s;animation-name:polygon-in-opposing-corners}@keyframes polygon-out-opposing-corners{0%{clip-path:var(--opposing-corners-in)}to{clip-path:var(--opposing-corners-out)}}[transition-style="out:polygon:opposing-corners"]{--transition__duration:1.5s;animation-name:polygon-out-opposing-corners}@keyframes diamond-in-center{0%{clip-path:var(--diamond-center-out)}to{clip-path:var(--diamond-center-in)}}[transition-style="in:diamond:center"]{--transition__duration:1.5s;animation-name:diamond-in-center}@keyframes diamond-out-center{0%{clip-path:var(--diamond-center-in)}to{clip-path:var(--diamond-center-out)}}[transition-style="out:diamond:center"]{--transition__duration:1.5s;animation-name:diamond-out-center}@keyframes diamond-in-double-scale{0%{clip-path:var(--diamond-center-out)}40%{clip-path:var(--diamond-hesitate)}to{clip-path:var(--diamond-center-in)}}[transition-style="in:diamond:hesitate"]{--transition__duration:1.5s;animation-name:diamond-in-double-scale}@keyframes diamond-out-double-scale{0%{clip-path:var(--diamond-center-in)}40%{clip-path:var(--diamond-hesitate)}to{clip-path:var(--diamond-center-out)}}[transition-style="out:diamond:hesitate"]{--transition__duration:1.5s;animation-name:diamond-out-double-scale} \ No newline at end of file diff --git a/transition.squares.min.css b/transition.squares.min.css index f080897..60eebc5 100644 --- a/transition.squares.min.css +++ b/transition.squares.min.css @@ -1 +1 @@ -[transition]{animation-delay:var(--transition__delay,0);animation-duration:var(--transition__duration,2.5s);animation-timing-function:var(--transition__easing,cubic-bezier(.25,1,.3,1));animation-fill-mode:both;will-change:clip-path}@media (prefers-reduced-motion:reduce),print{[transition]{animation-duration:1ms!important;transition-duration:1ms!important;animation-iteration-count:1!important}}@keyframes square-in-hesitate{0%{clip-path:var(--square-out)}40%{clip-path:var(--square-hesitate)}to{clip-path:var(--square-in)}}[transition="in:square:hesitate"]{animation-name:square-in-hesitate}@keyframes square-out-hesitate{0%{clip-path:var(--square-in)}40%{clip-path:var(--square-hesitate)}to{clip-path:var(--square-out)}}[transition="out:square:hesitate"]{animation-name:square-out-hesitate}@keyframes square-in-center{0%{clip-path:var(--square-out)}to{clip-path:var(--square-in)}}[transition="in:square:center"]{animation-name:square-in-center}@keyframes square-out-center{0%{clip-path:var(--square-in)}to{clip-path:var(--square-out)}}[transition="out:square:center"]{animation-name:square-out-center}@keyframes square-out-top-left{0%{clip-path:var(--square-in)}to{clip-path:var(--square-top-left-out)}}[transition="out:square:top-left"]{--transition__duration:1.5s;animation-name:square-out-top-left}@keyframes square-out-top-right{0%{clip-path:var(--square-in)}to{clip-path:var(--square-top-right-out)}}[transition="out:square:top-right"]{--transition__duration:1.5s;animation-name:square-out-top-right}@keyframes square-out-bottom-left{0%{clip-path:var(--square-in)}to{clip-path:var(--square-bottom-left-out)}}[transition="out:square:bottom-left"]{--transition__duration:1.5s;animation-name:square-out-bottom-left}@keyframes square-out-bottom-right{0%{clip-path:var(--square-in)}to{clip-path:var(--square-bottom-right-out)}}[transition="out:square:bottom-right"]{--transition__duration:1.5s;animation-name:square-out-bottom-right}@keyframes square-in-top-left{0%{clip-path:var(--square-bottom-right-out)}to{clip-path:var(--square-in)}}[transition="in:square:top-left"]{animation-name:square-in-top-left}@keyframes square-in-top-right{0%{clip-path:var(--square-bottom-left-out)}to{clip-path:var(--square-in)}}[transition="in:square:top-right"]{animation-name:square-in-top-right}@keyframes square-in-bottom-left{0%{clip-path:var(--square-top-right-out)}to{clip-path:var(--square-in)}}[transition="in:square:bottom-left"]{animation-name:square-in-bottom-left}@keyframes square-in-bottom-right{0%{clip-path:var(--square-top-left-out)}to{clip-path:var(--square-in)}}[transition="in:square:bottom-right"]{animation-name:square-in-bottom-right} \ No newline at end of file +[transition-style]{animation-delay:var(--transition__delay,0);animation-duration:var(--transition__duration,2.5s);animation-timing-function:var(--transition__easing,cubic-bezier(.25,1,.3,1));animation-fill-mode:both;will-change:clip-path}@media (prefers-reduced-motion:reduce),print{[transition-style]{animation-duration:1ms!important;transition-duration:1ms!important;animation-iteration-count:1!important}}@keyframes square-in-hesitate{0%{clip-path:var(--square-out)}40%{clip-path:var(--square-hesitate)}to{clip-path:var(--square-in)}}[transition-style="in:square:hesitate"]{animation-name:square-in-hesitate}@keyframes square-out-hesitate{0%{clip-path:var(--square-in)}40%{clip-path:var(--square-hesitate)}to{clip-path:var(--square-out)}}[transition-style="out:square:hesitate"]{animation-name:square-out-hesitate}@keyframes square-in-center{0%{clip-path:var(--square-out)}to{clip-path:var(--square-in)}}[transition-style="in:square:center"]{animation-name:square-in-center}@keyframes square-out-center{0%{clip-path:var(--square-in)}to{clip-path:var(--square-out)}}[transition-style="out:square:center"]{animation-name:square-out-center}@keyframes square-out-top-left{0%{clip-path:var(--square-in)}to{clip-path:var(--square-top-left-out)}}[transition-style="out:square:top-left"]{--transition__duration:1.5s;animation-name:square-out-top-left}@keyframes square-out-top-right{0%{clip-path:var(--square-in)}to{clip-path:var(--square-top-right-out)}}[transition-style="out:square:top-right"]{--transition__duration:1.5s;animation-name:square-out-top-right}@keyframes square-out-bottom-left{0%{clip-path:var(--square-in)}to{clip-path:var(--square-bottom-left-out)}}[transition-style="out:square:bottom-left"]{--transition__duration:1.5s;animation-name:square-out-bottom-left}@keyframes square-out-bottom-right{0%{clip-path:var(--square-in)}to{clip-path:var(--square-bottom-right-out)}}[transition-style="out:square:bottom-right"]{--transition__duration:1.5s;animation-name:square-out-bottom-right}@keyframes square-in-top-left{0%{clip-path:var(--square-bottom-right-out)}to{clip-path:var(--square-in)}}[transition-style="in:square:top-left"]{animation-name:square-in-top-left}@keyframes square-in-top-right{0%{clip-path:var(--square-bottom-left-out)}to{clip-path:var(--square-in)}}[transition-style="in:square:top-right"]{animation-name:square-in-top-right}@keyframes square-in-bottom-left{0%{clip-path:var(--square-top-right-out)}to{clip-path:var(--square-in)}}[transition-style="in:square:bottom-left"]{animation-name:square-in-bottom-left}@keyframes square-in-bottom-right{0%{clip-path:var(--square-top-left-out)}to{clip-path:var(--square-in)}}[transition-style="in:square:bottom-right"]{animation-name:square-in-bottom-right} \ No newline at end of file diff --git a/transition.wipes.min.css b/transition.wipes.min.css index 9828aa8..a602f9f 100644 --- a/transition.wipes.min.css +++ b/transition.wipes.min.css @@ -1 +1 @@ -[transition]{animation-delay:var(--transition__delay,0);animation-duration:var(--transition__duration,2.5s);animation-timing-function:var(--transition__easing,cubic-bezier(.25,1,.3,1));animation-fill-mode:both;will-change:clip-path}@media (prefers-reduced-motion:reduce),print{[transition]{animation-duration:1ms!important;transition-duration:1ms!important;animation-iteration-count:1!important}}@keyframes wipe-out-top{0%{clip-path:var(--wipe-in)}to{clip-path:var(--wipe-top)}}[transition="out:wipe:top"],[transition="out:wipe:up"]{animation-name:wipe-out-top}@keyframes wipe-out-right{0%{clip-path:var(--wipe-in)}to{clip-path:var(--wipe-right)}}[transition="out:wipe:right"]{animation-name:wipe-out-right}@keyframes wipe-out-bottom{0%{clip-path:var(--wipe-in)}to{clip-path:var(--wipe-bottom)}}[transition="out:wipe:bottom"],[transition="out:wipe:down"]{animation-name:wipe-out-bottom}@keyframes wipe-out-left{0%{clip-path:var(--wipe-in)}to{clip-path:var(--wipe-left)}}[transition="out:wipe:left"]{animation-name:wipe-out-left}@keyframes wipe-in-top{0%{clip-path:var(--wipe-top)}to{clip-path:var(--wipe-in)}}[transition="in:wipe:down"],[transition="in:wipe:top"]{animation-name:wipe-in-top}@keyframes wipe-in-right{0%{clip-path:var(--wipe-left)}to{clip-path:var(--wipe-in)}}[transition="in:wipe:right"]{animation-name:wipe-in-right}@keyframes wipe-in-bottom{0%{clip-path:var(--wipe-bottom)}to{clip-path:var(--wipe-in)}}[transition="in:wipe:bottom"],[transition="in:wipe:up"]{animation-name:wipe-in-bottom}@keyframes wipe-in-left{0%{clip-path:var(--wipe-right)}to{clip-path:var(--wipe-in)}}[transition="in:wipe:left"]{animation-name:wipe-in-left}@keyframes wipe-in-top-right{0%{clip-path:var(--wipe-bottom-left-out)}to{clip-path:var(--wipe-top-right-in)}}[transition="in:wipe:top-right"]{animation-name:wipe-in-top-right}@keyframes wipe-in-top-left{0%{clip-path:var(--wipe-bottom-right-out)}to{clip-path:var(--wipe-top-left-in)}}[transition="in:wipe:top-left"]{animation-name:wipe-in-top-left}@keyframes wipe-in-bottom-right{0%{clip-path:var(--wipe-top-left-out)}to{clip-path:var(--wipe-bottom-right-in)}}[transition="in:wipe:bottom-right"]{animation-name:wipe-in-bottom-right}@keyframes wipe-in-bottom-left{0%{clip-path:var(--wipe-top-right-out)}to{clip-path:var(--wipe-bottom-left-in)}}[transition="in:wipe:bottom-left"]{animation-name:wipe-in-bottom-left}@keyframes wipe-out-top-right{0%{clip-path:var(--wipe-bottom-left-in)}to{clip-path:var(--wipe-top-right-out)}}[transition="out:wipe:top-right"]{animation-name:wipe-out-top-right}@keyframes wipe-out-top-left{0%{clip-path:var(--wipe-bottom-right-in)}to{clip-path:var(--wipe-top-left-out)}}[transition="out:wipe:top-left"]{animation-name:wipe-out-top-left}@keyframes wipe-out-bottom-right{0%{clip-path:var(--wipe-top-left-in)}to{clip-path:var(--wipe-bottom-right-out)}}[transition="out:wipe:bottom-right"]{animation-name:wipe-out-bottom-right}@keyframes wipe-out-bottom-left{0%{clip-path:var(--wipe-top-right-in)}to{clip-path:var(--wipe-bottom-left-out)}}[transition="out:wipe:bottom-left"]{animation-name:wipe-out-bottom-left} \ No newline at end of file +[transition-style]{animation-delay:var(--transition__delay,0);animation-duration:var(--transition__duration,2.5s);animation-timing-function:var(--transition__easing,cubic-bezier(.25,1,.3,1));animation-fill-mode:both;will-change:clip-path}@media (prefers-reduced-motion:reduce),print{[transition-style]{animation-duration:1ms!important;transition-duration:1ms!important;animation-iteration-count:1!important}}@keyframes wipe-out-top{0%{clip-path:var(--wipe-in)}to{clip-path:var(--wipe-top)}}[transition-style="out:wipe:top"],[transition-style="out:wipe:up"]{animation-name:wipe-out-top}@keyframes wipe-out-right{0%{clip-path:var(--wipe-in)}to{clip-path:var(--wipe-right)}}[transition-style="out:wipe:right"]{animation-name:wipe-out-right}@keyframes wipe-out-bottom{0%{clip-path:var(--wipe-in)}to{clip-path:var(--wipe-bottom)}}[transition-style="out:wipe:bottom"],[transition-style="out:wipe:down"]{animation-name:wipe-out-bottom}@keyframes wipe-out-left{0%{clip-path:var(--wipe-in)}to{clip-path:var(--wipe-left)}}[transition-style="out:wipe:left"]{animation-name:wipe-out-left}@keyframes wipe-in-top{0%{clip-path:var(--wipe-top)}to{clip-path:var(--wipe-in)}}[transition-style="in:wipe:down"],[transition-style="in:wipe:top"]{animation-name:wipe-in-top}@keyframes wipe-in-right{0%{clip-path:var(--wipe-left)}to{clip-path:var(--wipe-in)}}[transition-style="in:wipe:right"]{animation-name:wipe-in-right}@keyframes wipe-in-bottom{0%{clip-path:var(--wipe-bottom)}to{clip-path:var(--wipe-in)}}[transition-style="in:wipe:bottom"],[transition-style="in:wipe:up"]{animation-name:wipe-in-bottom}@keyframes wipe-in-left{0%{clip-path:var(--wipe-right)}to{clip-path:var(--wipe-in)}}[transition-style="in:wipe:left"]{animation-name:wipe-in-left}@keyframes wipe-in-top-right{0%{clip-path:var(--wipe-bottom-left-out)}to{clip-path:var(--wipe-top-right-in)}}[transition-style="in:wipe:top-right"]{animation-name:wipe-in-top-right}@keyframes wipe-in-top-left{0%{clip-path:var(--wipe-bottom-right-out)}to{clip-path:var(--wipe-top-left-in)}}[transition-style="in:wipe:top-left"]{animation-name:wipe-in-top-left}@keyframes wipe-in-bottom-right{0%{clip-path:var(--wipe-top-left-out)}to{clip-path:var(--wipe-bottom-right-in)}}[transition-style="in:wipe:bottom-right"]{animation-name:wipe-in-bottom-right}@keyframes wipe-in-bottom-left{0%{clip-path:var(--wipe-top-right-out)}to{clip-path:var(--wipe-bottom-left-in)}}[transition-style="in:wipe:bottom-left"]{animation-name:wipe-in-bottom-left}@keyframes wipe-out-top-right{0%{clip-path:var(--wipe-bottom-left-in)}to{clip-path:var(--wipe-top-right-out)}}[transition-style="out:wipe:top-right"]{animation-name:wipe-out-top-right}@keyframes wipe-out-top-left{0%{clip-path:var(--wipe-bottom-right-in)}to{clip-path:var(--wipe-top-left-out)}}[transition-style="out:wipe:top-left"]{animation-name:wipe-out-top-left}@keyframes wipe-out-bottom-right{0%{clip-path:var(--wipe-top-left-in)}to{clip-path:var(--wipe-bottom-right-out)}}[transition-style="out:wipe:bottom-right"]{animation-name:wipe-out-bottom-right}@keyframes wipe-out-bottom-left{0%{clip-path:var(--wipe-top-right-in)}to{clip-path:var(--wipe-bottom-left-out)}}[transition-style="out:wipe:bottom-left"]{animation-name:wipe-out-bottom-left} \ No newline at end of file