diff --git a/README.md b/README.md index f86924c..20ee9db 100644 --- a/README.md +++ b/README.md @@ -18,11 +18,17 @@ **CDN** Latest at `https://unpkg.com/transition-style` -Or go minimal, import individual category bundles +Or import individual category bundles - `https://unpkg.com/transition-style/transition.circles.min.css` - `https://unpkg.com/transition-style/transition.squares.min.css` - `https://unpkg.com/transition-style/transition.polygons.min.css` - `https://unpkg.com/transition-style/transition.wipes.min.css` + +Or go slim & custom -> import the `hackpack` + - `https://unpkg.com/transition-style/transition.hackpack.min.css` + - Create a custom `@keyframe` animation with the imported custom properties. + +> Custom properties ship with the `transition.min.css` as well.

@@ -39,6 +45,37 @@ After `transition.css` has been added to your project, add an attribute to an el ``` +#### Custom +Go off the rails and build your own transitions with the custom props that ship with the each bundle. There's even the `hackpack` which is exclusively the custom props 🤘💀 + +Most of the built in transitions are from the center. Here's how you can set the `from` transition to somewhere custom. This is also the animation used on page load for [transition.style](https://transition.style). + +```css +@keyframes circle-swoop { + from { + clip-path: var(--circle-top-right-out); + } + to { + clip-path: var(--circle-bottom-right-in); + } +} + +[transition="in:custom:circle-swoop"] { + --transition__duration: 1s; + animation-name: circle-swoop; +} +``` + +Then, in the HTML: + +```html +
+ A custom transitioned element +
+``` + +- The only rule is that you must transition from the same type of shapes + #### Play Play and experiment with [this Codepen](https://codepen.io/argyleink/pen/RwrzGJb) diff --git a/app/css/index.css b/app/css/index.css index 08080b3..38e6c02 100644 --- a/app/css/index.css +++ b/app/css/index.css @@ -18,3 +18,17 @@ --brand: lch(57 56 273) } } + +@keyframes circle-swoop { + from { + clip-path: var(--circle-top-right-out); + } + to { + clip-path: var(--circle-bottom-right-in); + } +} + +[transition="in:custom:circle-swoop"] { + --transition__duration: 5s; + animation-name: circle-swoop; +} diff --git a/app/index.html b/app/index.html index adeaa01..b03d844 100644 --- a/app/index.html +++ b/app/index.html @@ -15,7 +15,7 @@ -
+

transition @@ -32,7 +32,7 @@

- + @@ -92,7 +92,7 @@

Circles

Entrances
in:circle:center
in:circle:top-right
-
in:circle:top-left
+
in:circle:top-left
in:circle:bottom-right
in:circle:bottom-left
@@ -157,6 +157,7 @@

Polygons

+ Customize ↗ Suggest a transition ↗ Contribute ↗ diff --git a/app/js/index.js b/app/js/index.js index 2b6be04..c87f1ed 100644 --- a/app/js/index.js +++ b/app/js/index.js @@ -2,12 +2,9 @@ import $ from 'blingblingjs' const $demo = $('section') -const [selected] = $('dd').filter(d => - d.textContent === 'in:circle:top-left') - const state = { - transition: 'in:circle:top-left', - selected, + transition: 'in:custom:circle-swoop', + selected: null, } const update = transition => { @@ -33,7 +30,7 @@ $demo.on('click', e => { $('dd').on('click', e => { let transition = e.currentTarget.textContent - state.selected.removeAttribute('selected') + state.selected?.removeAttribute('selected') e.currentTarget.setAttribute('selected', true) state.selected = e.currentTarget diff --git a/package.json b/package.json index ad4ec35..448949a 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "lib:circles": "postcss src/circles/index.css -c src -o transition.circles.min.css", "lib:squares": "postcss src/squares/index.css -c src -o transition.squares.min.css", "lib:polygons": "postcss src/polygons/index.css -c src -o transition.polygons.min.css", + "lib:hackpack": "postcss src/hackpack.css -c src -o transition.hackpack.min.css", "start": "concurrently --kill-others npm:dev:*", "bundle": "concurrently --kill-others npm:lib:*", "production": "npm run build && npm run prod:server" diff --git a/src/hackpack.css b/src/hackpack.css new file mode 100644 index 0000000..4c38f74 --- /dev/null +++ b/src/hackpack.css @@ -0,0 +1,2 @@ +@import "_vars"; +@import "_base"; \ No newline at end of file diff --git a/transition.hackpack.min.css b/transition.hackpack.min.css new file mode 100644 index 0000000..ba78233 --- /dev/null +++ b/transition.hackpack.min.css @@ -0,0 +1 @@ +:root{--circle-center-center-out:circle(0%);--circle-center-center-in:circle(125%);--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-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%);--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 diff --git a/transition.min.css b/transition.min.css index 65ae214..990a49a 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-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-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%)}[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-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-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:polygon(0 0,50% 50%,100% 100%,50% 50%)}to{clip-path:polygon(0 0,0 100%,100% 100%,100% 0)}}[transition="in:polygon:opposing-corners"]{--transition__duration:1.5s;animation-name:polygon-in-opposing-corners}@keyframes polygon-out-opposing-corners{0%{clip-path:polygon(0 0,0 100%,100% 100%,100% 0)}to{clip-path:polygon(0 0,50% 50%,100% 100%,50% 50%)}}[transition="out:polygon:opposing-corners"]{--transition__duration:1.5s;animation-name:polygon-out-opposing-corners}@keyframes diamond-in-center{0%{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}to{clip-path:polygon(-50% 50%,50% -50%,150% 50%,50% 150%)}}[transition="in:diamond:center"]{--transition__duration:1.5s;animation-name:diamond-in-center}@keyframes diamond-out-center{0%{clip-path:polygon(-50% 50%,50% -50%,150% 50%,50% 150%)}to{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}}[transition="out:diamond:center"]{--transition__duration:1.5s;animation-name:diamond-out-center} \ No newline at end of file +:root{--circle-center-center-out:circle(0%);--circle-center-center-in:circle(125%);--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-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%);--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-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-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} \ No newline at end of file diff --git a/transition.polygons.min.css b/transition.polygons.min.css index 3dc268a..2601bd9 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:polygon(0 0,50% 50%,100% 100%,50% 50%)}to{clip-path:polygon(0 0,0 100%,100% 100%,100% 0)}}[transition="in:polygon:opposing-corners"]{--transition__duration:1.5s;animation-name:polygon-in-opposing-corners}@keyframes polygon-out-opposing-corners{0%{clip-path:polygon(0 0,0 100%,100% 100%,100% 0)}to{clip-path:polygon(0 0,50% 50%,100% 100%,50% 50%)}}[transition="out:polygon:opposing-corners"]{--transition__duration:1.5s;animation-name:polygon-out-opposing-corners}@keyframes diamond-in-center{0%{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}to{clip-path:polygon(-50% 50%,50% -50%,150% 50%,50% 150%)}}[transition="in:diamond:center"]{--transition__duration:1.5s;animation-name:diamond-in-center}@keyframes diamond-out-center{0%{clip-path:polygon(-50% 50%,50% -50%,150% 50%,50% 150%)}to{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}}[transition="out:diamond:center"]{--transition__duration:1.5s;animation-name:diamond-out-center} \ No newline at end of file +[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} \ No newline at end of file