Improve your motion

What is motion?

Motion in CSS?

// Transition
.element
transition .32 ease-in-out
// Animation + Keyframes
@keyframes basicMotion
1%, 100%
transform translateX(0)

50%
transform translateX(100px)
.element
animation basicMotion .4s ease-in-out infinite
// Transition
.element
transition-delay 0
transition-duration .32s
transition-property all
transition-timing-function ease-in-out
// Animation + Keyframes
@keyframes basicMotion
1%, 100%
transform translateX(0)

50%
transform translateX(100px)
.element
animation-name basicMotion
animation-duration .4s
animation-timing-function ease-in-out
animation-iteration-count infinite
animation-delay 0

How to improve your motion?

scalable delay
.cards--active 
.cards
&__item
&-title, &-text, &-figure
transform translateY(0)
opacity 1
transition-timing-function cubic-bezier(0.9, 0.01, 0.25, 1)
&-figure
transition-delay 0.27s

&-title
transition-delay 0.35s
&-text
transition-delay 0.43s
Card example using delay
Difference between duration and delay.
Understanding the difference using the inspect animation.
.cards--active 
.cards
&__item
&-title, &-text, &-figure
transform translateY(0)
opacity 1
transition-timing-function cubic-bezier(0.9, 0.01, 0.25, 1)
&-figure
transition-duration 0.4699s

&-title
transition-duration 0.5698s
&-text
transition-duration 0.6697s

Advanced example

// define var
$ease = cubic-bezier(0.77, 0.03, 0.19, 1)
// define function
getDuration(i, start=.09)
(.32 + ( i * start ))s
Layout example
Layout example with imaginary lines
.days
width 100%
display flex
overflow hidden
padding 5em 6em 0 7em
&__item
list-style none
width 85%
flex-shrink 0
display block
&-enter
&-active
& ^[0]__item
for i in (1..3)
&:nth-child({i})
transition getDuration(i, .09) $ease
& ^[0]__item
transform translateY(35px)
opacity 0
&-to
& ^[0]__item
transform translateY(0px)
opacity 1
Example first list
&-enter, &-appear
&-active
& ^[0]__item
transition-delay .32s
transition-timing-function $ease
will-change transform, opacity
backface-visibility hidden
transform-style preserve-3d
for i in (1..4)
&:nth-child({i})
transition-duration getDuration(i)
& ^[0]__item
transform translateY(40px)
opacity 0
&-to
& ^[0]__item
transform translateY(0)
opacity 1
will-change: transform, opacity;
backface-visibility: hidden;
transform-style: preserve-3d;
Example with delay and duration
Final example
Hover example

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store