Improve your motion

Erick Leopoldo
Jul 26, 2018 · 5 min read

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

// Transition
.element
transition-delay 0
transition-duration .32s
transition-property all
transition-timing-function ease-in-out

Animation

// 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.

The same card using duration

.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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade