-
Notifications
You must be signed in to change notification settings - Fork 193
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Logical Animation Directions #422
base: main
Are you sure you want to change the base?
Changes from all commits
b22b11c
e12ff60
1dd9242
cf60881
2020010
394d6d8
c81c420
f737f66
6d498b3
8d84136
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,5 @@ | ||
@import 'props.media.css'; | ||
@import 'props.supports.css'; | ||
|
||
:where(html) { | ||
--animation-fade-in: fade-in .5s var(--ease-3); | ||
|
@@ -9,12 +10,16 @@ | |
--animation-scale-down: scale-down .5s var(--ease-3); | ||
--animation-slide-out-up: slide-out-up .5s var(--ease-3); | ||
--animation-slide-out-down: slide-out-down .5s var(--ease-3); | ||
--animation-slide-out-right: slide-out-right .5s var(--ease-3); | ||
--animation-slide-out-left: slide-out-left .5s var(--ease-3); | ||
--animation-slide-out-end: slide-out-end .5s var(--ease-3); | ||
--animation-slide-out-right: var(--animation-slide-out-end); | ||
--animation-slide-out-start: slide-out-start .5s var(--ease-3); | ||
--animation-slide-out-left: var(--animation-slide-out-start); | ||
Comment on lines
+13
to
+16
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nice job matching these all up 👍🏻 |
||
--animation-slide-in-up: slide-in-up .5s var(--ease-3); | ||
--animation-slide-in-down: slide-in-down .5s var(--ease-3); | ||
--animation-slide-in-right: slide-in-right .5s var(--ease-3); | ||
--animation-slide-in-left: slide-in-left .5s var(--ease-3); | ||
--animation-slide-in-end: slide-in-end .5s var(--ease-3); | ||
--animation-slide-in-right: var(--animation-slide-in-end); | ||
--animation-slide-in-start: slide-in-start .5s var(--ease-3); | ||
--animation-slide-in-left: var(--animation-slide-in-start); | ||
--animation-shake-x: shake-x .75s var(--ease-out-5); | ||
--animation-shake-y: shake-y .75s var(--ease-out-5); | ||
--animation-spin: spin 2s linear infinite; | ||
|
@@ -53,23 +58,23 @@ | |
@keyframes slide-out-down { | ||
to { transform: translateY(100%) } | ||
} | ||
@keyframes slide-out-right { | ||
to { transform: translateX(100%) } | ||
@keyframes slide-out-end { | ||
to { transform: translateX(calc(100% * var(--isLTR))) } | ||
} | ||
@keyframes slide-out-left { | ||
to { transform: translateX(-100%) } | ||
@keyframes slide-out-start { | ||
to { transform: translateX(calc(-100% * var(--isLTR))) } | ||
} | ||
@keyframes slide-in-up { | ||
from { transform: translateY(100%) } | ||
} | ||
@keyframes slide-in-down { | ||
from { transform: translateY(-100%) } | ||
} | ||
@keyframes slide-in-right { | ||
from { transform: translateX(-100%) } | ||
@keyframes slide-in-end { | ||
from { transform: translateX(calc(-100% * var(--isLTR))) } | ||
} | ||
@keyframes slide-in-left { | ||
from { transform: translateX(100%) } | ||
@keyframes slide-in-start { | ||
from { transform: translateX(calc(100% * var(--isLTR))) } | ||
} | ||
@keyframes shake-x { | ||
0%, 100% { transform: translateX(0%) } | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,9 +8,16 @@ | |
:where(html) { | ||
--isLTR: 1; | ||
--isRTL: -1; | ||
|
||
&:dir(rtl) { | ||
/* PostCSS compiles this to [dir="rtl"] :where(html) for older browsers, which doesn't work */ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. adding |
||
--isLTR: -1; | ||
--isRTL: 1; | ||
} | ||
|
||
&[dir="rtl"] { | ||
/* Force the dir attribute selector to attach to :where(html) */ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this is a nice backup to using |
||
--isLTR: -1; | ||
--isRTL: 1; | ||
} | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.