diff --git a/docsite/index.html b/docsite/index.html index f61c650e..80916ee0 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -2562,7 +2562,7 @@
--animation-fade-{in,out}
--animation-fade-{in,out}-bloom
- --animation-shake-{x,y}
+ --animation-shake-{x,y,z}
--animation-slide-out-{up,down,left,right}
--animation-slide-in-{up,down,left,right}
@@ -2844,6 +2844,16 @@ Shake Y
+
+
+ Shake Z
+
+
diff --git a/src/props.animations.css b/src/props.animations.css
index a03bddda..d8a6a323 100644
--- a/src/props.animations.css
+++ b/src/props.animations.css
@@ -17,6 +17,7 @@
--animation-slide-in-left: slide-in-left .5s var(--ease-3);
--animation-shake-x: shake-x .75s var(--ease-out-5);
--animation-shake-y: shake-y .75s var(--ease-out-5);
+ --animation-shake-z: shake-z 1s var(--ease-in-out-3);
--animation-spin: spin 2s linear infinite;
--animation-ping: ping 5s var(--ease-out-3) infinite;
--animation-blink: blink 1s var(--ease-out-3) infinite;
@@ -85,6 +86,13 @@
60% { transform: translateY(-5%) }
80% { transform: translateY(5%) }
}
+@keyframes shake-z {
+ 0%, 100% { transform: rotate(0deg) }
+ 20% { transform: rotate(-2deg) }
+ 40% { transform: rotate(2deg) }
+ 60% { transform: rotate(-2deg) }
+ 80% { transform: rotate(2deg) }
+}
@keyframes spin {
to { transform: rotate(1turn) }
}
diff --git a/src/props.animations.js b/src/props.animations.js
index 5ba7d050..778e4807 100644
--- a/src/props.animations.js
+++ b/src/props.animations.js
@@ -102,6 +102,15 @@ export default {
40% { transform: translateY(5%) }
60% { transform: translateY(-5%) }
80% { transform: translateY(5%) }
+}`,
+"--animation-shake-z": "shake-z 1s var(--ease-in-out-3)",
+"--animation-shake-z-@": `
+@keyframes shake-z {
+ 0%, 100% { transform: rotate(0deg) }
+ 20% { transform: rotate(-2deg) }
+ 40% { transform: rotate(2deg) }
+ 60% { transform: rotate(-2deg) }
+ 80% { transform: rotate(2deg) }
}`,
"--animation-spin": "spin 2s linear infinite",
"--animation-spin-@": `
diff --git a/test/basic.test.cjs b/test/basic.test.cjs
index c239f7ef..9ba5120b 100644
--- 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, 1654)
+ t.is(Object.keys(OpenProps).length, 1658)
})
test('Import should have animations', async t => {