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 @@
The Props

               --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 => {