fade-in-bloom and fade-out-boom for argyleink#255 (argyleink#260)

* fade-in-bloom and fade-out-boom for argyleink#255 * update test 1086 + 8 = 1094 * remove console log (used for quick debug)
kelvindecosta · Aug 11, 2022 · e1a0512 · e1a0512
1 parent 5f748e1
commit e1a0512
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/src/props.animations.css b/src/props.animations.css
@@ -1,6 +1,8 @@
 :where(html) {
   --animation-fade-in: fade-in .5s var(--ease-3);
+  --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
   --animation-fade-out: fade-out .5s var(--ease-3);
+  --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
   --animation-scale-up: scale-up .5s var(--ease-3);
   --animation-scale-down: scale-down .5s var(--ease-3);
   --animation-slide-out-up: slide-out-up .5s var(--ease-3);
@@ -24,9 +26,19 @@
 @keyframes fade-in {
   to { opacity: 1 }
 }
+@keyframes fade-in-bloom {
+  0% { opacity: 0; filter: brightness(1) blur(20px) }
+ 10% { opacity: 1; filter: brightness(2) blur(10px) }
+100% { opacity: 1; filter: brightness(1) blur(0) }
+}
 @keyframes fade-out {
   to { opacity: 0 }
 }
+@keyframes fade-out-bloom {
+100% { opacity: 0; filter: brightness(1) blur(20px) }
+ 10% { opacity: 1; filter: brightness(2) blur(10px) }
+  0% { opacity: 1; filter: brightness(1) blur(0) }
+}
 @keyframes scale-up {
   to { transform: scale(1.25) }
 }

diff --git a/src/props.animations.js b/src/props.animations.js
@@ -3,11 +3,25 @@ export default {
   "--animation-fade-in-@": `
 @keyframes fade-in {
   to { opacity: 1 }
+}`,
+  "--animation-fade-in-bloom": "fade-in-bloom 2s var(--ease-3)",
+  "--animation-fade-in-bloom-@": `
+@keyframes fade-in-bloom {
+  0% { opacity: 0; filter: brightness(1) blur(20px) }
+ 10% { opacity: 1; filter: brightness(2) blur(10px) }
+100% { opacity: 1; filter: brightness(1) blur(0) }
 }`,
   "--animation-fade-out": "fade-out .5s var(--ease-3)",
   "--animation-fade-out-@": `
 @keyframes fade-out {
   to { opacity: 0 }
+}`,
+  "--animation-fade-out-bloom": "fade-out-bloom 2s var(--ease-3)",
+  "--animation-fade-out-bloom-@": `
+@keyframes fade-out-bloom {
+100% { opacity: 0; filter: brightness(1) blur(20px) }
+ 10% { opacity: 1; filter: brightness(2) blur(10px) }
+  0% { opacity: 1; filter: brightness(1) blur(0) }
 }`,
   "--animation-scale-up": "scale-up .5s var(--ease-3)", 
   "--animation-scale-up-@": `

diff --git a/test/basic.test.cjs b/test/basic.test.cjs
@@ -4,7 +4,7 @@ const OpenProps = require('../dist/open-props.cjs')
 const OPtokens = require('../open-props.tokens.json')
 
 test('Should have an all included import', t => {
-  t.is(Object.keys(OpenProps).length, 1086)
+  t.is(Object.keys(OpenProps).length, 1094)
 })
 
 test('Import should have animations', async t => {