If you are a front-end developer you spend a lot of time researching and trying to understand how motion works and questioning yourself what is the best technique to improve your transitions and show the content in the most fluid way to the user.

What is motion?

Motion is the action or process of moving. At websites, a motion is present in transitions when you return a callback to the user, when he clicks something, place the mouse over an element or when a change occurs on the page.

Motion in CSS?

In CSS you can build motion effects by using some properties like transition and animation with keyframes.

// Transition

.element

transition .32 ease-in-out



basicMotion

1%, 100%

transform translateX(0)



50%

transform translateX(100px) // Animation + Keyframes @keyframes basicMotion1%, 100%transform translateX(0)50%transform translateX(100px) .element

animation basicMotion .4s ease-in-out infinite

These two properties have some “sub-properties”, which can help us modify our animations and have better control over them.

Transition

The transition is a property that you can use to add motion in an element when you add a new class and/or control the interactions :focus :hover :active .

// Transition

.element

transition-delay 0

transition-duration .32s

transition-property all

transition-timing-function ease-in-out

Animation

The animation is another property that allows you to create incredible interactions in your application, by the way, this property needs a keyframe, that is like a timeline, to control your motion.



basicMotion

1%, 100%

transform translateX(0)



50%

transform translateX(100px) // Animation + Keyframes @keyframes basicMotion1%, 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?

When thinking about how to show feedback and delivering the best experience to your users you need to know about some parameters.

All the content you will show needs to be sweet, fluid and scalable.

scalable delay

To achieve a visual effect like the gif above you would probably choose to use the property transition-delay , fine-tuning the value to find the perfect set.

.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

Show the content step by step is a very useful technique and guess what?! You can make it even better by using the transition-duration property instead of transition-delay.

Based on concepts of motion, changing transition-delay to transition-duration gives you a better control over your transitions making all things look more fluid and sweet.

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

Using duration you can take your motion to the next level.

First, let’s store the transition-timing-function property in a variable, so we can reuse it, then we create a function, which returns a custom duration, and we can also reuse it. I’m using Stylus pre-processor in the examples.

// define var

$ease = cubic-bezier(0.77, 0.03, 0.19, 1) // define function

getDuration(i, start=.09)

(.32 + ( i * start ))s

The getDuration() function takes two arguments, the first one is the item position and second is the time (in milliseconds) to control the speed in our motion.

Let’s suppose we have the layout below and we need to add a motion effect when the content appears in the screen. The first thing we gotta do is to think about every element in the screen as a separate block (like the image below), as you would when creating components in your daily tasks.

Layout example

Layout example with imaginary lines

It’s very easy to use our function in the code to create the desired motion effect.

.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

You may have asked yourself: “what about the delay?”

We’ll use it to create a fluid “entrance” effect, so every element will enter the screen at different points in our animation timeline.

&-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

In this case, we delay the element animation and create a fluid motion too.

An important tip if you have a lot of different animations and need to care about rendering performance and frames per second, you can use the properties below.

will-change: transform, opacity;

backface-visibility: hidden;

transform-style: preserve-3d;

The result:

Example with delay and duration

In the end, our simple property change helped us to achieve a fluid and performative visual effect.

Final example

Hover example

You can see a full demo and the code in the links below.

________________

| DEMO | CODE |

If you enjoyed the reading or have any question, comment below or send me an e-mail erick@leopoldo.me.

❤️