Faster transitions

This commit is contained in:
Eduard Urbach 2016-11-20 03:23:31 +09:00
parent 9794a09f12
commit 0a099bca72
8 changed files with 11 additions and 10 deletions

View File

@ -64,7 +64,7 @@
border-radius 3px border-radius 3px
box-shadow 4px 4px 8px rgba(0, 0, 0, 0.12) box-shadow 4px 4px 8px rgba(0, 0, 0, 0.12)
filter saturate(100%) filter saturate(100%)
transition all 290ms ease transition all transitionSpeed ease
&:hover &:hover
filter saturate(130%) filter saturate(130%)
box-shadow 6px 6px 12px rgba(0, 0, 0, 0.2) box-shadow 6px 6px 12px rgba(0, 0, 0, 0.2)

View File

@ -29,7 +29,7 @@
border-radius 3px border-radius 3px
box-shadow 0px 0px 8px rgba(0, 0, 0, 0.4) box-shadow 0px 0px 8px rgba(0, 0, 0, 0.4)
transform translate(10%, -50%) transform translate(10%, -50%)
transition all 290ms ease transition all transitionSpeed ease
pointer-events none pointer-events none
.anime .anime

View File

@ -13,7 +13,7 @@ body
a a
text-decoration none text-decoration none
transition all 290ms ease transition all transitionSpeed ease
&:hover &:hover
text-decoration none text-decoration none
&:active &:active

View File

@ -10,4 +10,6 @@ uiBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0,
uiHoverBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%) uiHoverBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)
outlineShadowLight = 0 0 6px rgba(0, 0, 0, 0.05) outlineShadowLight = 0 0 6px rgba(0, 0, 0, 0.05)
outlineShadowMedium = 0 0 6px rgba(0, 0, 0, 0.15) outlineShadowMedium = 0 0 6px rgba(0, 0, 0, 0.15)
outlineShadowHeavy = 0 0 6px rgba(0, 0, 0, 0.4) outlineShadowHeavy = 0 0 6px rgba(0, 0, 0, 0.4)
transitionSpeed = 290ms
fadeSpeed = 200ms

View File

@ -1,6 +1,6 @@
.fade .fade
opacity 1 opacity 1
transition opacity 200ms ease transition opacity fadeSpeed ease
will-change opacity will-change opacity
.fade-out .fade-out

View File

@ -31,7 +31,7 @@ button
box-shadow none box-shadow none
border none border none
text-align center text-align center
transition all 290ms ease transition all transitionSpeed ease
width 100% width 100%
max-width none max-width none

View File

@ -26,7 +26,7 @@
border uiHoverBorder border uiHoverBorder
background uiHoverBackground background uiHoverBackground
box-shadow outlineShadowMedium box-shadow outlineShadowMedium
transform scale(1.04) transform scale(1.03)
// .grid-icon // .grid-icon
// transform scale(1.3) // transform scale(1.3)
@ -50,7 +50,6 @@
margin-top 2rem margin-top 2rem
margin-bottom 0.7rem margin-bottom 0.7rem
color linkColor color linkColor
transition transform 200ms ease-in-out
.grid-image .grid-image
width 100% width 100%

View File

@ -20,7 +20,7 @@
margin-top 0 margin-top 0
height 3px height 3px
width 0px width 0px
transition all 500ms ease transition all transitionSpeed ease
&.active &.active
&:hover &:hover
cursor pointer cursor pointer
@ -33,4 +33,4 @@
padding 0.75em 1em padding 0.75em 1em
font-size 1.1em font-size 1.1em
line-height 1em line-height 1em
transition all 290ms ease // transition all transitionSpeed ease