From 88173cf4bb4b3a2e2958d39a026269b406fd17d3 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Tue, 4 Aug 2020 14:09:31 -0700 Subject: [PATCH] new hesitation effects --- src/circles/_includes.css | 3 +++ src/circles/_vars.css | 1 + src/circles/in-hesitate.css | 15 +++++++++++++++ src/circles/out-hesitate.css | 15 +++++++++++++++ src/polygons/_vars.css | 2 +- src/polygons/diamond-in-height-width.css | 4 ++-- src/polygons/diamond-out-height-width.css | 4 ++-- src/squares/_includes.css | 7 +++++-- src/squares/_vars.css | 1 + src/squares/in-hesitate.css | 15 +++++++++++++++ src/squares/out-hesitate.css | 15 +++++++++++++++ 11 files changed, 75 insertions(+), 7 deletions(-) create mode 100644 src/circles/in-hesitate.css create mode 100644 src/circles/out-hesitate.css create mode 100644 src/squares/in-hesitate.css create mode 100644 src/squares/out-hesitate.css diff --git a/src/circles/_includes.css b/src/circles/_includes.css index 2bd79e3..29790c7 100644 --- a/src/circles/_includes.css +++ b/src/circles/_includes.css @@ -1,3 +1,6 @@ +@import "in-hesitate.css"; +@import "out-hesitate.css"; + @import "in-center.css"; @import "out-center.css"; diff --git a/src/circles/_vars.css b/src/circles/_vars.css index 03248cf..af43bb5 100644 --- a/src/circles/_vars.css +++ b/src/circles/_vars.css @@ -1,6 +1,7 @@ :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); diff --git a/src/circles/in-hesitate.css b/src/circles/in-hesitate.css new file mode 100644 index 0000000..3d3d9db --- /dev/null +++ b/src/circles/in-hesitate.css @@ -0,0 +1,15 @@ +@keyframes circle-in-hesitate { + 0% { + clip-path: var(--circle-center-center-out); + } + 40% { + clip-path: var(--circle-hesitate); + } + 100% { + clip-path: var(--circle-center-center-in); + } +} + +[transition="in:circle:hesitate"] { + animation-name: circle-in-hesitate; +} \ No newline at end of file diff --git a/src/circles/out-hesitate.css b/src/circles/out-hesitate.css new file mode 100644 index 0000000..477318e --- /dev/null +++ b/src/circles/out-hesitate.css @@ -0,0 +1,15 @@ +@keyframes circle-out-hesitate { + 0% { + clip-path: var(--circle-center-center-in); + } + 40% { + clip-path: var(--circle-hesitate); + } + 100% { + clip-path: var(--circle-center-center-out); + } +} + +[transition="out:circle:hesitate"] { + animation-name: circle-out-hesitate; +} \ No newline at end of file diff --git a/src/polygons/_vars.css b/src/polygons/_vars.css index dfc8239..b92c51e 100644 --- a/src/polygons/_vars.css +++ b/src/polygons/_vars.css @@ -1,7 +1,7 @@ :root { --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-height-stretched: polygon(45% 50%, 50% 25%, 55% 50%, 50% 75%); + --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%); diff --git a/src/polygons/diamond-in-height-width.css b/src/polygons/diamond-in-height-width.css index e253ff4..4ba3069 100644 --- a/src/polygons/diamond-in-height-width.css +++ b/src/polygons/diamond-in-height-width.css @@ -3,14 +3,14 @@ clip-path: var(--diamond-center-out); } 40% { - clip-path: var(--diamond-height-stretched); + clip-path: var(--diamond-hesitate); } 100% { clip-path: var(--diamond-center-in); } } -[transition="in:diamond:height-width"] { +[transition="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-height-width.css b/src/polygons/diamond-out-height-width.css index 68f819f..ed2d933 100644 --- a/src/polygons/diamond-out-height-width.css +++ b/src/polygons/diamond-out-height-width.css @@ -3,14 +3,14 @@ clip-path: var(--diamond-center-in); } 40% { - clip-path: var(--diamond-height-stretched); + clip-path: var(--diamond-hesitate); } 100% { clip-path: var(--diamond-center-out); } } -[transition="out:diamond:height-width"] { +[transition="out:diamond:hesitate"] { --transition__duration: 1.5s; animation-name: diamond-out-double-scale; } \ No newline at end of file diff --git a/src/squares/_includes.css b/src/squares/_includes.css index 3923442..29790c7 100644 --- a/src/squares/_includes.css +++ b/src/squares/_includes.css @@ -1,6 +1,9 @@ +@import "in-hesitate.css"; +@import "out-hesitate.css"; + @import "in-center.css"; -@import "out-center.css" -; +@import "out-center.css"; + @import "out-top-left.css"; @import "out-top-right.css"; @import "out-bottom-left.css"; diff --git a/src/squares/_vars.css b/src/squares/_vars.css index 6eab0dc..bb85e75 100644 --- a/src/squares/_vars.css +++ b/src/squares/_vars.css @@ -1,4 +1,5 @@ :root { + --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); diff --git a/src/squares/in-hesitate.css b/src/squares/in-hesitate.css new file mode 100644 index 0000000..f2c7901 --- /dev/null +++ b/src/squares/in-hesitate.css @@ -0,0 +1,15 @@ +@keyframes square-in-hesitate { + 0% { + clip-path: var(--square-out); + } + 40% { + clip-path: var(--square-hesitate); + } + 100% { + clip-path: var(--square-in); + } +} + +[transition="in:square:hesitate"] { + animation-name: square-in-hesitate; +} \ No newline at end of file diff --git a/src/squares/out-hesitate.css b/src/squares/out-hesitate.css new file mode 100644 index 0000000..503d931 --- /dev/null +++ b/src/squares/out-hesitate.css @@ -0,0 +1,15 @@ +@keyframes square-out-hesitate { + 0% { + clip-path: var(--square-in); + } + 40% { + clip-path: var(--square-hesitate); + } + 100% { + clip-path: var(--square-out); + } +} + +[transition="out:square:hesitate"] { + animation-name: square-out-hesitate; +} \ No newline at end of file