From 8e495f248ae25564b795cd7530d20c0376a7c5d8 Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Mon, 27 Jun 2022 14:40:58 +1000 Subject: Move transition/animation CSS classes to index.css --- src/index.css | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) (limited to 'src/index.css') diff --git a/src/index.css b/src/index.css index a072000..a82c47e 100644 --- a/src/index.css +++ b/src/index.css @@ -9,3 +9,68 @@ body { font-family: Ubuntu, system-ui, sans-serif; } + +/* For transitions/animations */ +.fade-enter-from, .fade-leave-to { + opacity: 0; +} +.fade-enter-active, .fade-leave-active { + transition-property: opacity; + transition-duration: 300ms; + transition-timing-function: ease-out; +} +.fadein-leave-to { + opacity: 0; +} +.fadein-leave-active { + transition-property: opacity; + transition-duration: 300ms; + transition-timing-function: ease-out; +} +.animate-expand-shrink { + animation-name: expand-shrink; + animation-duration: 300ms; + animation-iteration-count: 1; + animation-timing-function: ease-in-out; +} +@keyframes expand-shrink { + from { + transform: scale(1, 1); + } + 50% { + transform: scale(1.1, 1.1); + } + to { + transform: scale(1, 1); + } +} +.animate-shrink-expand { + animation-name: shrink-expand; + animation-duration: 300ms; + animation-iteration-count: 1; + animation-timing-function: ease-in-out; +} +@keyframes shrink-expand { + from { + transform: translate3d(0,0,0) scale(1, 1); + } + 50% { + transform: translate3d(0,0,0) scale(0.9, 0.9); + } + to { + transform: translate3d(0,0,0) scale(1, 1); + } +} +.animate-red-then-fade { + animation-name: red-then-fade; + animation-duration: 500ms; + animation-timing-function: ease-in; +} +@keyframes red-then-fade { + from { + background-color: rgba(255,0,0,0.2); + } + to { + background-color: transparent; + } +} -- cgit v1.2.3