Author: Brian Michael Poblete [brianmp.dev@gmail.com]
Committer: GitHub [noreply@github.com] Fri, 05 Apr 2024 18:02:12 +0000
Hash: a04f5d40ac9788d3ba335541eff15d7ee5f954fa
Timestamp: Fri, 05 Apr 2024 18:02:12 +0000 (5 months ago)

+29 -2 +/-4 browse
add shake-z animation (#489) 
add shake-z animation (#489)

* add wobble animation

* adjust wobble animation timing function

* update test

* rename animation to shake-z

* Update docsite/index.html

Co-authored-by: Adam Argyle <argyle@google.com>

* Update docsite/index.html

Co-authored-by: Adam Argyle <argyle@google.com>

* add animation shake z in animation props example

---------

Co-authored-by: Adam Argyle <argyle@google.com>
1diff --git a/docsite/index.html b/docsite/index.html
2index f61c650..80916ee 100644
3--- a/docsite/index.html
4+++ b/docsite/index.html
5 @@ -2562,7 +2562,7 @@
6 <pre class="language-css"><code>
7 --animation-fade-{in,out}
8 --animation-fade-{in,out}-bloom
9- --animation-shake-{x,y}
10+ --animation-shake-{x,y,z}
11
12 --animation-slide-out-{up,down,left,right}
13 --animation-slide-in-{up,down,left,right}
14 @@ -2844,6 +2844,16 @@
15 </svg>
16 </button>
17 </div>
18+
19+ <div class="animation-demo-target" data-animation="shake-z">
20+ <h6>Shake Z</h6>
21+ <button class="play-button">
22+ <svg viewBox="0 0 20 20">
23+ <use href="#play-icon"/>
24+ <use href="#pause-icon" class="hidden"/>
25+ </svg>
26+ </button>
27+ </div>
28 </div>
29 </div>
30
31 diff --git a/src/props.animations.css b/src/props.animations.css
32index a03bddd..d8a6a32 100644
33--- a/src/props.animations.css
34+++ b/src/props.animations.css
35 @@ -17,6 +17,7 @@
36 --animation-slide-in-left: slide-in-left .5s var(--ease-3);
37 --animation-shake-x: shake-x .75s var(--ease-out-5);
38 --animation-shake-y: shake-y .75s var(--ease-out-5);
39+ --animation-shake-z: shake-z 1s var(--ease-in-out-3);
40 --animation-spin: spin 2s linear infinite;
41 --animation-ping: ping 5s var(--ease-out-3) infinite;
42 --animation-blink: blink 1s var(--ease-out-3) infinite;
43 @@ -85,6 +86,13 @@
44 60% { transform: translateY(-5%) }
45 80% { transform: translateY(5%) }
46 }
47+ @keyframes shake-z {
48+ 0%, 100% { transform: rotate(0deg) }
49+ 20% { transform: rotate(-2deg) }
50+ 40% { transform: rotate(2deg) }
51+ 60% { transform: rotate(-2deg) }
52+ 80% { transform: rotate(2deg) }
53+ }
54 @keyframes spin {
55 to { transform: rotate(1turn) }
56 }
57 diff --git a/src/props.animations.js b/src/props.animations.js
58index 5ba7d05..778e480 100644
59--- a/src/props.animations.js
60+++ b/src/props.animations.js
61 @@ -103,6 +103,15 @@ export default {
62 60% { transform: translateY(-5%) }
63 80% { transform: translateY(5%) }
64 }`,
65+ "--animation-shake-z": "shake-z 1s var(--ease-in-out-3)",
66+ "--animation-shake-z-@": `
67+ @keyframes shake-z {
68+ 0%, 100% { transform: rotate(0deg) }
69+ 20% { transform: rotate(-2deg) }
70+ 40% { transform: rotate(2deg) }
71+ 60% { transform: rotate(-2deg) }
72+ 80% { transform: rotate(2deg) }
73+ }`,
74 "--animation-spin": "spin 2s linear infinite",
75 "--animation-spin-@": `
76 @keyframes spin {
77 diff --git a/test/basic.test.cjs b/test/basic.test.cjs
78index c239f7e..9ba5120 100644
79--- a/test/basic.test.cjs
80+++ b/test/basic.test.cjs
81 @@ -4,7 +4,7 @@ const OpenProps = require('../dist/open-props.cjs')
82 const OPtokens = require('../open-props.tokens.json')
83
84 test('Should have an all included import', t => {
85- t.is(Object.keys(OpenProps).length, 1654)
86+ t.is(Object.keys(OpenProps).length, 1658)
87 })
88
89 test('Import should have animations', async t => {