From 84e732112cd875a5a499ef46bccf62eb2b47b767 Mon Sep 17 00:00:00 2001 From: zhna123 Date: Thu, 20 Apr 2023 21:04:32 -0400 Subject: [PATCH] Changed to use word expand to describe menu animations --- animation/03-dropdown-menu/README.md | 4 ++-- animation/03-dropdown-menu/solution/solution.css | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/animation/03-dropdown-menu/README.md b/animation/03-dropdown-menu/README.md index cfd7875..0d12b6a 100644 --- a/animation/03-dropdown-menu/README.md +++ b/animation/03-dropdown-menu/README.md @@ -2,7 +2,7 @@ We've set up a dropdown menu in this exercise. Load up the page, you can see a single menu title, with a dropdown menu that will open upon clicking on the title. -Your task is to add animation to the dropdown menu so that it will have an effect of growing down. Check out the desired outcome below, and notice the _bounce_ illusion when the dropdown grows close to its final end state. +Your task is to add animation to the dropdown menu so that it will have an effect of expanding. Check out the desired outcome below, and notice the _bounce_ illusion when the dropdown expands close to its final end state. ### Hints - You need to specify a _transform-origin_ property to make the dropdown menu start transforming from the top @@ -14,5 +14,5 @@ Your task is to add animation to the dropdown menu so that it will have an effec ### Self Check -- The dropdown menu grows down after you click on the menu title +- The dropdown menu expands after you click on the menu title - There's a _bounce_ illusion towards the end of the animation \ No newline at end of file diff --git a/animation/03-dropdown-menu/solution/solution.css b/animation/03-dropdown-menu/solution/solution.css index bc5c59a..5c12c21 100644 --- a/animation/03-dropdown-menu/solution/solution.css +++ b/animation/03-dropdown-menu/solution/solution.css @@ -32,11 +32,11 @@ ul.dropdown-menu li:hover { /* SOLUTION */ .visible { - animation: goDown 500ms ease-in-out; + animation: expand 500ms ease-in-out; transform-origin: top; } -@keyframes goDown { +@keyframes expand { 0% { transform: scaleY(0); }