Basic CSS Animations in Webflow

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

states

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

it

helps a lot to distinguish that hover

state so if we go down to borders

we can select the border solid and make

that

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

different

boxes around our design so a

simple solution to using this idea of

hover

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

that

and instead i'm going to add a box

shadow

like this so i add the box shadow color

white

i remove the blur and the distance i

only have

the size so on the size i go ahead and

select

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

difference

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

tab

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

across

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

transitions

again on our effects panel if we click

on the button

what we want to do is have activated

some

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

curves

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

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

transformation

is selecting the type to go all

properties

so all properties that you have modified

will now be

applied so notice how smooth it is now

with

both the border and the scaling of the

buttons

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

buttons

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

can learn about

triggered interactions

‍