KreativePro Masterclass
Hello, {first_name}
Basic CSS Animation
Learn to build websites without code in Webflow
Oops! Something went wrong while submitting the form.
Browse Lessons

Access our premium community including bonus tutorials, project files & weekly resources.


Basic CSS Animations in Webflow

On this Webflow lesson we take a look at basic css animations. How to add animations to hover states in Webflow and how to setup css transitions using Webflow.

It's your turn!

Take a moment to download this Webflow Template so you can practice, experiment and use however you want!

📥 Download Template

Webflow Project Files

All our project files for you to practice and play with along with some bonus materials.

Webflow Project Files


Being the best means investing in the best, no matter what level you are at, this course will take you through the entire process you need to be able to implement an idea and turn it into a fully functional business.
Manasés Padilla
Photographer & Entrepreneur
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
Noel Hale
Founder of Slush Monkeys®
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
Mae Green
Product Designer @ Dropbox

all right let's jump into the first type

of interaction one really cool thing

about css is the ability to add

animation into some of our elements

without requiring

javascript some of the basic animations

can be seen

in minor things like the buttons and the

different states of each button

so for example when i hover over a

button what is that button

going to look like let's jump over to

our playground

so we know that we have some combo

classes created for each

color so primary secondary and third i'm

going to copy this button and i'm going

to duplicate it

i'm going to remove the combo class and

this particular button right here

i'm going to start adding some hover


so on the hover state what exactly do we

want to see

on hover i want this button to have a

nice outline

around and go back to the hover one

thing i like to do

is simply by adding an outline or a

border around

a button to show that i'm highlighting


helps a lot to distinguish that hover

state so if we go down to borders

we can select the border solid and make


a white color and we can make the width

of that border

5 pixels so it's obvious if we

toggle off our overstate back to none

simply by hovering over but the button

we see right away what we've applied

but the problem with using borders is

that it's starting to affect the box

model so it's pushing

everything aside both top and bottom and

this could create some

issues when we start having a lot of


boxes around our design so a

simple solution to using this idea of


is instead of using the border we're

going to do the following

okay i'm going to remove the border so

remove that border which adds spacing to


and instead i'm going to add a box


like this so i add the box shadow color


i remove the blur and the distance i

only have

the size so on the size i go ahead and


four and check this out it added a

simple border

without affecting all of the other

elements around it

that's exactly what we want to do but

only on the hover state

so let's let's try that again see the


this is a much better way a less

intrusive way to

avoid breaking down your designs by

adding some

interaction to your components and to

your buttons

another thing i like to add here is the

idea of

transforming it so maybe scaling the

button up higher

how can we do that so let's simply

select the button again

and i'm going to click on the hover and

i go down to 2d and 3d transforms

i click on plus and then from the scale


because this is both locked in all i

have to do is move this around

and slowly you can see the button

starting to scale

its size but without affecting all the

other components around it

so this is pretty useful because now we

can transform any

components that's within the box model

all right so i'm going to do that 1.1

and right now notice that i'm always

doing this on hover but i'll need to go

back to none

to try it out

but there's it feels a little bit

jarring now that i think about it

and notice that all the other buttons as

well are applying that because we're pl

we're playing with the global class

button which all of these

share so if we go back our on our

homepage all of that has been applied


which is really cool what can we do to

make this

feel a bit smoother that's where the

transitions come in so these are css


again on our effects panel if we click

on the button

what we want to do is have activated


transitions based on the specific values

or changes that we made to this design

so we change some of the values so one

of the common ones that we can do

is transform

when you hover over the button now the

animation is applied

over over a period of 200 milliseconds

if you click on the easing tab

you're gonna toggle open these different


these curves are all about the

interpolation of how the animation

starts and how it ends and you can play

around with some of these

so you can see how the animation gets

done just by playing it

you can see how fast the interpolation

is displayed

i typically like just using this one

which is the

basic ease curve depending on what


you're doing if it's a longer duration

you might want to start experimenting

with these other ones which have a nice

a nice wide curve okay but because this

is just the css animation we want to

keep it simple so we're doing that but

notice how that

border is not animating that's because

we only have the transition

specifically to transform one quick

shortcut to make this

work for both the border and the


is selecting the type to go all


so all properties that you have modified

will now be

applied so notice how smooth it is now


both the border and the scaling of the


let's take a look at our home page nice

this is great

oh wow yeah this is so nice i love how

the buttons feels

and we just have to go and modify one

single class

and it's applying it across all of our


so i'll see you on the next lesson so we

can learn about

triggered interactions

Coming Soon

The future of the web without code
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor
KreativePro Masterclass Bundle

Access our premium community including bonus tutorials, project files & weekly resources.

Welcome to the Tribe! 💜 Something cool is coming your way...