diff --git a/crabfit-frontend/src/components/Logo/logoStyle.ts b/crabfit-frontend/src/components/Logo/logoStyle.ts index 2709403..1243b21 100644 --- a/crabfit-frontend/src/components/Logo/logoStyle.ts +++ b/crabfit-frontend/src/components/Logo/logoStyle.ts @@ -11,19 +11,15 @@ export const A = styled.a` @keyframes jelly { from,to { - -webkit-transform: scale(1,1); transform: scale(1,1) } 25% { - -webkit-transform: scale(.9,1.1); transform: scale(.9,1.1) } 50% { - -webkit-transform: scale(1.1,.9); transform: scale(1.1,.9) } 75% { - -webkit-transform: scale(.95,1.05); transform: scale(.95,1.05) } } diff --git a/crabfit-frontend/src/pages/Home/homeStyle.ts b/crabfit-frontend/src/pages/Home/homeStyle.ts index 976f8d8..a214baa 100644 --- a/crabfit-frontend/src/pages/Home/homeStyle.ts +++ b/crabfit-frontend/src/pages/Home/homeStyle.ts @@ -47,6 +47,28 @@ export const TitleLarge = styled.h1` export const Logo = styled.img` width: 80px; + transition: transform .2s; + animation: jelly .5s 1 .1s; + + @keyframes jelly { + from,to { + transform: scale(1,1) + } + 25% { + transform: scale(.9,1.1) + } + 50% { + transform: scale(1.1,.9) + } + 75% { + transform: scale(.95,1.05) + } + } + + &:active { + animation: none; + transform: scale(.85); + } `; export const Links = styled.nav`