From 49740be472167de11939483ee6154cf881fe6324 Mon Sep 17 00:00:00 2001 From: Adam Silverstein Date: Thu, 19 Dec 2024 16:36:48 -0700 Subject: [PATCH] add tranition formatting --- .../themes/twentyseventeen/style.css | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/src/wp-content/themes/twentyseventeen/style.css b/src/wp-content/themes/twentyseventeen/style.css index 0d066d2a7a0a1..e62d11c03f33a 100644 --- a/src/wp-content/themes/twentyseventeen/style.css +++ b/src/wp-content/themes/twentyseventeen/style.css @@ -65,6 +65,40 @@ html { navigation: auto; } +/* Mark the `
` element as the element that should transition */ +#content { + view-transition-name: my-main-content; +} + +/* Apply animations to the snapshots */ +/* Note, `main-content` is the view transition name specified in the previous CSS block */ +::view-transition-old(my-main-content) { + animation: 500ms ease-out both slide-out; +} + +::view-transition-new(my-main-content) { + animation: 500ms ease-out both slide-in; +} + +/* Define the animations */ +@keyframes slide-out { + from { + transform: translateX(0); + } + to { + transform: translateX(-100%); + } +} + +@keyframes slide-in { + from { + transform: translateX(100%); + } + to { + transform: translateX(0); + } +} + body { margin: 0; }