CSS Animation and CSS Transition, what are their differences, and when to use them

We will use both properties to add motion to CSS backgrounds. They both make things move, in one direction or another, at a given speed, with a given easing method, for a certain time.

The difference between the two, that dictates when you should use one or the other, is about how they behave.

CSS Transitions need to be triggered

A trigger can be a mouse over, focus change, click, adding or removing a class programmatically. They need a trigger to start, and will do only one thing: animate a value from a state to another (position, opacity…).

CSS Transitions can’t loop. At least they’re not designed for that. In short, CSS Transitions will animate from A to B.

If I am looking for a simple from/to animation that reacts to the user, I go with CSS Transitions.

CSS Animations just start

They don’t need any explicit triggering. They start, do their thing, and stop or loop a certain number of times of indefinitely.

CSS animations allow you to define keyframes. It adds a lot more complexity and possibilities, allowing you to define complex behaviors.

In short, CSS Animations animate from A to B to C and possibly loop.

If what I want requires the flexibility provided by having multiple keyframes and easy looping, then I go with an animation.

Animations, Transitions and Webflow

Transitions are built-in Webflow

You can add as many transitions you want to the default state of an element. They’ll then be used whenever the element has a change triggered (a background color on :hover, for example).

You can also set their easing method very precisely, and visually. Don’t settle for ease or ease-in-out, they’re most likely not the effect you're looking for. Explore the other easing modes and find the one that suits your transition. For example, anything that has to snap should get a ease-out-quart or quint method. Try it and you’ll see the difference. Another tip, don’t make small transitions too long. 150, 200, 250 milliseconds are good values. 500 ms is often way too much for a :hover transition.

Tip: even if it’s possible, don’t set a Transition to “All properties”. It has dramatic effects on the overall performance of the page. Only declare the transitions you need, even if there’s 5 of them.

There is no specific control over Animations in Webflow

Webflow has an interaction module, but it will not use CSS Animation. It is solely using Javascript to achieve what you’ve made with it.

Whatever you do with Webflow’s UI, it will not use CSS Animation.

Background animations

Background animation using CSS Transitions

Animating a background with CSS Transition in Webflow is fairly easy. We need to define a background on an element, activate CSS Transitions on that element, make the background move for another state of the element, and chose a trigger.

The proof of concept

Let’s set up a block with an icon as a background.

Our background has the following non-repeat and centered placement properties.

Let’s switch to the :hover state of our element.

And let’s move the background a bit to the right.

Back on the normal state of the element, let’s add the CSS Transition: we need the background-position transition.

Now, it already works, even in the designer view.

It's a bit of a boring transition for a Salvador Dali icon! Let's adjust the easing mode to something a little bit snappier, with a bounce.

We achieved a fine tuned CSS Transition on a background position, using the `:hover` trigger.

Adding complexity

With Webflow, it’s extremely easy to add several backgrounds to an element, wether they are images, gradients or color overlays.

Let’s define a second image background and make a more complex animation. We’re going to use the same Salvador Dali icon but this time white, and position it on top of the black one.

Now we’re editing the default state and move the white icon up, out of the boundaries of our element.

Now we switch to the :hover state once again, and move both our background: the black icon is moved down, and the white one moved back in the center.

Additionally, we change the background color of our element, for the icon to pop out.

Back to the default state, we add a new Transition, this time for the background color.

Again, the result can be seen immediately in the designer view. Upon hovering the element, the black icon moves down out of the way, letting room for the white one. All of this happens while the element smoothly transitioning from a white to a green background.

We have achieved a complexed and fine tune effect using 2 CSS transitions and 2 background images.

The New Print Button: an example in the wild

To illustrate this technique I created The New Print Button mini site.

It contains many examples made of the same technique we just learnt.

Sometimes mixed with Webflow Interactions (using Javascript on your back).

Some example show you a simpler way to use 2 background images, without any motion this time.

Along with many examples using the exact same technique you just read about, you’ll find the HTML and CSS code (in the form of a Codepen snippet) and the graphical resources you need to reproduce the button, thanks to Webalys who graciously offered to give the icons away for the occasion.

I’m using Webalys icons for years now. To me, they’re among the best icon packs you can find. Pixel perfect, tagged and ready for apps like IconJar, thousands of variations, they’re what a pro requires from icon packs. This is a true recommendation, not an endorsed ad.

Check The New Print Button mini site.

How does the CSS code look like?

I have extracted the CSS code to make a CodePen standalone version.

The code is pretty simple.

the css code of the new print button

.new-print-button {
background-color: rgb(40, 194, 127);
background-image:               url(http://uploads.webflow.com/58403463926ee7da5fc95c2c/5840549e41ed56e151574a8c_print%20button%20icon%203-white.svg), url(http://uploads.webflow.com/58403463926ee7da5fc95c2c/5840549e316b850d0aa56057_print%20button%20icon%202-white.svg);
background-position-x: 17px, 17px;
background-position-y: -122%, 47%;
background-repeat: no-repeat;
background-size: 33px, 34px;
border-radius: 3px;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: block;
font-family: "Open Sans", sans-serif;
font-size: 23px;
font-weight: normal;
height: 64px;
line-height: 24px;
margin: 0 10px 0 10px;
padding: 20px 40px 20px 62px;
text-align: center;
text-decoration: none;
text-size-adjust: 100%;
transition-property: background-color, background-position, opacity, color, text-shadow, box-shadow;
transition-delay: 0s, 0s, 0s, 0s, 0s, 0s;
transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s; 
transition-timing-function: ease, ease, ease, ease, ease, ease;
width: 276.109px;
}

.new-print-button:hover {
background-position: 16px 45%, 17px 218%;background-color: #31e085;
}

Note how the Transitions are declared. 

First what we’re transitioning on

transition-property: background-color, background-position, opacity, color, text-shadow, box-shadow;

The 6 transitions of the button are declared in one line. It is the equivalent of this in Webflow:

Then, the same kind of inline list, for all the other properties. Delay, duration and easing method (timing-function)

The other properties

transition-delay: 0s, 0s, 0s, 0s, 0s, 0s;
transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s; 
transition-timing-function: ease, ease, ease, ease, ease, ease;

Note that Webflow let you define the duration (200ms here), the timing function (ease here), but not the delay.

You can manually add the delays by custom code using the following syntax. Values apply, in order, to the ones you’’ve been defining in Webflow: background-color, background-position, opacity, color, text-shadow and box-shadow.

Delays

transition-delay: 0s, 0s, 0s, 0s, 0s, 0s;

If we needed a delay of one second, let’s say on background color, we'd write that code:

Delay on background color

transition-delay: 1s, 0s, 0s, 0s, 0s, 0s;

And it has the expected effect of delaying the transition to another background color by one second.

Note that durations are defined in milliseconds (ms) in Webflow and in seconds (s) in our extracted CSS code. 200 milliseconds (200ms) equals to 1.2 seconds (1.2s). A little secret: if you’re tired of typing milliseconds values in Webflow, just type s after your value and it will be interpreted in seconds. 1s instead of 1000ms will do.

Background animation using CSS Animation

We’ve said that Webflow doesn’t use the CSS Animation property. So if we want to use it, we need to do it manually, with custom code.

That’s how I animated the hero background layers of The New Print Button site.

Preparing the stage

I ensured the layers of my hero background were properly looping on the X axis.

And then aligned them nicely in my hero header.

They all use the same parameters, except the ones in the background have a vertical adjustment to address responsivity. Of course, they all repeat on the X axis.

The position is adjusted to ensure that the scene is visible for every browser dimension, and that none of the boundaries of any layer is visible.

Let’s look at the published CSS code for the hero header.

The css code for the .header element

Using Chrome’s developer tools, we grab the published CSS code.

The CSS code of the header

header { height: 100%; background-color: #62f6cc; background-image:
url(http://uploads.webflow.com/58403463926ee7da5fc95c2c/5852b7cd05b004e37e42ffee_foreground.png), 
url(http://uploads.webflow.com/58403463926ee7da5fc95c2c/5852b7cdfcb377e77683218b_layer-2.png), 
url(http://uploads.webflow.com/58403463926ee7da5fc95c2c/5852b7cdc3df534d7a2f884c_layer-3.png), 
url(http://uploads.webflow.com/58403463926ee7da5fc95c2c/5852b7cd340c2d2577e0ecea_layer-4.png);
background-position: 0px 0px, 0px 100%, 0px 50%, 0px 0px;
background-size: contain, contain, contain, contain;
background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
}

Se see our 4 background layers, their respective position, size and repeat values.

Injecting custom Animation CSS code

We’re going to define a CSS animation. First we need to define Keyframes

Keyframes

@keyframes bgscroll {
from {background-position: 0px 0px, 0px 100%, 0px 50%, 0px 0px;}
to {background-position: 7680px 0, 5760px 100%, 3840px 50%, 1920px 0;} 
}

Above, bgscroll is a variable that we chose and that we’re going to reuse after. The layers move from 11920 to 41920 pixels. They exactly move a distance equals to their width, or twice, thrice and four time their width. This is a trick because we can only set one duration for all background animation within the same element. So as we want to achieve a parallax effect and have a perfect loop on all layers, this is the only choice we get. Each layer goes twice as fast as the layer behind.

We also have to get rid of the contain property of each layer of the background, which would prevent the animation from running. We’re then displaying the images at their pixel value, so it needs some preparation.

We need to add the animation code to the header’s CSS.

CSS Animation code

animation-name: bgscroll;
animation-duration: 30s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;

And the animation runs well in CodePen.

Check the CodePen

Applying the animation to a Webflow site using custom code

Let’s grab only the code we need to add to Webflow.

Custom code

<style>

@keyframes bgscroll {
from {background-position: 0px 0px, 0px 100%, 0px 50%, 0px 0px;}
to {background-position: 7680px 0, 5760px 100%, 3840px 50%, 1920px 0;}
}

.header {
animation-name: bgscroll;
animation-duration: 200s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}

</style>

And paste it into the Header custom code at page level.

After publishing, we get a multiple background animation on a Webflow site, using CSS Animation.

• The New Print Button mini site

‍

Appendix 1: Differences between a Javascript animation and a CSS animation

You can read for months about this topic on the web.

But the general idea is that CSS animation run smoother than Javascript animations, and in some case that can even be noticeable on the most powerful machine.

Javascript animations are sent to your processor, the CPU, to be rendered. They are then processed with everything else on your machine, competing with all the other threads.

CSS animations, however, are rendered by the graphical processor, the GPU. The GPU is less crowded in threads and renders on the fly, potentially at any frame rate. It’s lighter for the machine to handle, smoother to look at.

That being said, I have some pretty busy Webflow sites and I never experienced a jaggy Interaction animation, even on a slow machine. The theory is true, but that’s not much of a concern.

But when you have the choice to do the same thing using for example a :hover (CSS) or Interaction, prefer to do it with CSS.