🎨 Add fade animation to cards #42
Conversation
|
@RicAlvesO is attempting to deploy a commit to the CeSIUM Team on Vercel. A member of the Team first needs to authorize it. |
❌ Deploy Preview for cesium-link failed.
|
nelsonmestevao
changed the title
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/cesiuminho/cesium-link/vdCEEuMxf7LysFxGLisdhQS7Ly7i |
components/Card/style.module.css
Outdated
| @@ -11,14 +12,15 @@ | |||
| text-decoration: none; | |||
| border: 1px solid #eaeaea; | |||
| border-radius: 10px; | |||
| transition: color 0.15s ease, border-color 0.15s ease; | |||
| transition: color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease; | |||
There was a problem hiding this comment.
These much transition time makes the website feel slow. Could you try a smaller value, please?
components/Card/style.module.css
Outdated
| .card:hover { | ||
| color: white; | ||
| border-color: white; | ||
| background-color: orange; |
There was a problem hiding this comment.
I like the upgrade to orange to make it more consist with our branding. However, I dislike the orange fill. Could you try orange as border color?
What about adding some animation effect on mouse hover, live rotating, shaking or something else?
|
Following the much appreciated feedback the button animation was changed. Transitions are back to .15s and background color is back to white. As suggested, border and text color are now orange to be more in line with the brand, the new animation makes the orange color slide through the button as the color changes, disappearing right after. |
If applied will add a new animation to selected/hovered cards in the cesium.link website.