Chào mừng bạn đến với TUTUAPP

CSS Transition

ah what’s up everyone my name is Travis

Nilson and this is dev tips a YouTube

channel where we look at web design and

development and today we’re starting a

new series called the what is called CSS

animation series now the way this series

breaks down is we’re going to have two

principal episodes and by principle I

mean we’re going to be talking about the

the functionality syntax the ideas

behind making this all work what are the

principles involved in making the

animations in CSS happen and then after

that we’re going to have a few episodes

more practical episodes and in those

episodes I’m going to go over like the

things that you should be animating

because there are some things that don’t

need to be animated that I see animated

a lot and I want to go over and give you

some good recommendations and show you

practical examples of what and how and

why you should be animating certain

things and not other things but that

will come later and I don’t know how

many of those will be it’ll just be like

a continue to do them until I’m bored of

them kind of situation but this is the

first of the two principled episodes but

before we go into the how of CSS

animation I want to go into the what am

I talking about when I say CSS animation

or animation on the web

okay so animation kind of breaks down

into these these two ideas the first

idea is to just to give something life

right you’d like dr. Frankenstein has

this monster and gives it life he

animates it right the second one is what

we really want to be looking at today is

to give something the appearance of

having movement and the key here is is

really movement okay so in CSS there are

two main ways that we move things around

the page the first one is what we’re

this video today is going to be covering

it’s the transition property this is the

how we animate with CSS the first one is

using the transition property the second

one is by using the animation property

and you have to couple that with the

this other idea called keyframes and

we’re going to get into that in next

week’s video or the next video that I

create but right now we’re going to be

looking at the transition property and

then after both of these two like I

mentioned early

here we’re gonna have a few videos that

are planned and they’re gonna be talking

about you know the elements that you

should be animating and we’re going to

take a little bit more of a UX stance on

that what you should animate because

it’s good for the user and what you

should not animate because it’s

ridiculous and dumb sound fun okay on to

the first episode today we’re going to

be talking about the transition property

and this is part one of the CSS

animation series so let’s let’s first

take a look at how it’s written what’s

the syntax of transitions in CSS how do

we write them let’s break them down like

this we declare this transition on an

element and the element that we – the

blue right there the element in this

case that’s a class called element the

thing that we call this transition on

will be the thing that’s going to be

transitioned or the thing that’s going

to move okay and how we write that is

there’s a few parameters there’s a few

values for the property of transition

the first value of the property is the

other property that’s going to animate

and that’ll make make sense in a second

the second one is duration how long is

this transition happening and the third

one there is he is I say ease because

timing function didn’t kind of fit in

the line I wanted to keep it on one line

but you can think of it as timing

function or ease basically this is the

how how is that transition distributed

across time is it ease in out ease in

you could even use things like cubic

Bezier or steps with transition so it’s

pretty cool and then the last one is

delay how long should this wait before

the animation or in this case the

transition starts happening okay you

would write it out something like this

here’s an example of how this would be

written transition opacity not and the

first the green there is the property of

the element that we’re animating so if

there’s a bunch of element properties

like height and width and color all

those things will not get transitioned

only opacity you could even write the

keyword instead of writing opacity in

green you could write all that means

everything will get this same transition

okay after transition you’re right the

orange which is time so transition the

opacity over

300 milliseconds and use a timing

function of ease in out but wait until

after one second has passed before this

transition starts does that make sense

this is this is the formula for how

we’re going to write transitions this is

the syntax and you can actually add more

than one transitions onto any given

element if you just wear that semicolon

is right there just change that for a

comma and then repeat the green orange

pink and blue and then end with the

semicolon right so you can have you can

transition different properties so like

if this is a pay city and we wanted to

also and transition the background color

you would write this again but the green

would say background color right I hope

that explains itself so that is the

syntax of CSS transitions and you notice

that in this example opacity is the

property so let’s talk about properties

what can we animate and what can we not

animate because there are some things

that just don’t make sense to be

animated right or they’re just not even

able to be animated so animatable

properties okay things like font size

background color I have listed here

width and like left which is how far

from the left something is positioned

these things would make sense obviously

if you change the value of these

properties that some kind of visual

change would happen if you if you change

the font size from 14 pixels to 28

pixels you can see that there’s going to

be an animation that happens there there

there’s there is distinct traversal of

the values that can happen width from 28

pixels to 100 pixels wide you could see

that thing growing all right background

color you can see the color changing

those things are animatable properties

and this list of four is not all of them

there’s like you know actually there is

a list of all of them and I’ll link to

that in the description below but

basically you just think of it as

anything that you can imagine changing

you can most likely animate it okay here

are some things you cannot animate just

just as an example to help you

understand the difference right so we

have display

can you imagine something visually

changing from display:block

inline-block what would that look like

right

can you imagine visually something

changing position relative to absolute

you could see that there’s a difference

in the way it will display but how would

you transition from from relative to

absolute you can’t do that right you

can’t you can’t animate the font family

from Helvetica to – I was going to say

Arial but you kind of can do that now

Helvetica Helvetica – you know Georgia

or something you can’t like animate the

characters it just it just doesn’t work

you have to switch them out there’s no

animation that can happen there right so

a lot of properties are animatable and

some are not and that’s just what I want

to explain here now when you’re

considering animatable properties you

have to consider what animate what

properties are the best properties to

animate in other words performance or I

have to consider performance because

animation takes a lot of work to do

we’re moving things around on the screen

we’re making things go whiz and bang and

are we animating the right thing right

and some and there’s there’s going to be

a some links down below some references

that you can read on why some things are

better than others to animate but here’s

here’s the general rule okay the most

performant things to animate our

position scale rotation and opacity

notice those first ones their position

scale and rotation those are all in the

transform you know property so it’s kind

of just like transform and opacity you

so you would say like we’re position I’m

not talking about position left I’m

talking about translate right translate

this X&Y so these four things are the

most performant things to translate and

I have a quote right here from Paul

Lewis and Irish who wrote an article

together on html5 rocks comm and they’re

talking about these four properties and

the quote says here if you animate

anything else other than these four it’s

at your own risk and the chances are

that you’re not going to have that silky

smooth 60 frames per sec

animation and that’s what we were

talking about in when we’re talking

about performance like the most

performant things to animate our you

know transforms and opacity other than

that you might dip below sixty frames

per second and there’s a lot of reasons

for that an article is very good so I

recommend you go read that there is a

link in the description and just to

summarize that these things do not cause

a repaint of the elements and they do

not also cause a reflow of the layout

which are very costly in terms of

browser rendering these things transform

and opacity will just basically change

the element they’re targeting on which

is a lot more proficient in terms of in

terms of browser performance okay so now

that we have that out of the way we know

we know how to transform something and

we know what we should be transforming

let’s talk about triggering how do you

do you trigger a transform in other

words how do you make one happen okay

it’s not that hard there’s a lot of

different ways

but the main two that you want to cover

is by having the hover pseudo-class you

hover over something and it it

transitions and you know that could be

either itself or a child of itself and

I’ll show you how that works this the

second one is a class change so

something has is a normal element and

then you switch a class but that class

has the command or the style of it to

transform translate transition so that

all these trends transfer point

transition it so the news the new class

has the style of transition on it and

I’ll just kind of like move it around

based on the new class and when you take

that class off it moves back right so

this is what this is a great way to do a

few things like menus or dropdowns and

things like that we’ll talk about those

in a second that’s it that’s all the

talking that we’re going to be doing now

let’s jump into some code and you know

roll up your sleeves and get Cody here

we are in the code and it’s a very very

simple code just to start out with we

have the famous pink box the pink box

that we learned almost everything on I

love a pink box for some reason

um okay and we’re using Jade which

translates to HTML so you see like I’ve

clicked the view compiled it’s actually

just a div with a class of box but I

just get a write box because I like Jade

and if you like Jade or you don’t know

what Jade is check out the you know do

you even Jade bro video and understand

what the heck that is and then for our

CSS we’re using sass it compiles down to

normal CSS so if you don’t like Jade if

you don’t like sass that’s okay normal

HTML and CSS works for all of this stuff

and this is a code pen so you can visit

the visit this code pen later I’ll have

a link for that code pen in the

description and just like you compiled

so you can understand the HTML and CSS

if you have a problem with that but I

don’t care enough to do it for you

just saying so we have a pink box here

we have one HTML element called box we

have a body which has 50% there are 50

pixels of padding and I don’t know why

we have a font color on that body and

then we have a box which is an inline

block background pink and a height and

width of 200 pixels super basic okay now

what we going to do is we’re going to

transform this box so transform and

we’ll just say translate translate means

move let’s say translate it 200 pixels

that way and then 150 pixels that ways

so we’re moving it to the right and down

and that’s that’s all fair let’s rotate

it a little bit let’s rotate it like 20

degrees okay now we see that we’ve just

moved it and moved it down but there was

no transition it’s just just it just

snapped right where it should be right

so let’s talk about this transition

property will write the transition let’s

get rid of our JavaScript move this up

here and so to transition them to get

that to animate down we have to write a

transition and what do we want this

transition to be remembering back to our

syntax will say transform is the

property that we want to transition and

how long should it take let’s say 300

milliseconds which is just a good

Goodspeed for your eyes to understand

what’s happening and what’s the next one

the the timing function let’s use the

classic ease in out one of my favorites

it’s easy to do and it looks good and

then the delay we only don’t want to put

a delay on there okay so I’ve saved it

what has happened nothing has happened

why is nothing happened well because the

the origination of the of the animation

is never like it’s already there right

so one way that you can really easily

understand how something will transition

is take that take the property that

we’re trying to transition and just

quickly comment it out now we can see

that there’s some movement happening

right pop-up okay so now there’s no

transform declared so all of those you

know values of transformed the translate

and the rotate are kind of zeroed out

but when we quickly add them the

transition will say oh I’m looking at

transform let’s do this let’s take let’s

take 300 milliseconds and ease it in a

certain way for that transition to

happen right pretty simple the next step

to understand and use these things is to

realize that the the user is not going

to be editing your CSS we can’t expect

them to come in here and comment and

uncomment your code right so what we’re

going to do is we’re going to take this

and and put the responsibility of

triggering off into a hover

so box let’s say box hover there you go

that’s how you write that and then in

the hover we want to put this transform

LX cut that and paste that here okay so

notice that the transition is always on

the box I you get this confused when I

first started like where do I put the

transition on the hover because I want

it to hover no no you put the

destination of the style on the hover

and the transition is always on the Box

looking for a change in this property

when that when the hover happens it says

oh here’s a change in this property

let’s do it over time which is that

right did you get all that okay so let’s

hover over this and we’ll see that this

transform will happen when we hover BAM

see that all right you see this little

jittering here that’s a problem because

what’s what’s happening is that our

target in other words the box with the

pseudo selector of hover is that is the

target and it is actually moving around

so this makes it pretty hard and if you

hurt like you know well I mean imagine

that you’re a user you’re trying to

hover over the pink box and it’s like

flying around you’re like wait wait like

it’s follow down here okay follow what

so what we’re going to do to combat this

problem is actually offload the hover

onto another element so let me show you

what I mean I’m going to go up here and

say trigger this is going to be my

triggering element I’m going to put box

as a child in that so let me show you

how that renders the box is a child of

trigger all right and then I’m going to

go in here let’s style the trigger up a

little bit

trigger it’ll be the same size with 200

pixels height 200 pixels border 20

pixels solid and we’ll say 99 and then

background is going to be a goal DDD

okay we have this trigger element that’s

around the box element and I’m going to

offload this hovers right now it’s still

hovering in the box until of this this

this jittery problem I’m going to

offload the hover to trigger and I’m not

going to transform trigger right I’m not

going to do that that’s not what I want

to still the same problem look legit

ring what I’m going to do is I’m going

to say when trigger is hovered then take

box the child of trigger and transform

that like that now it’s really clear

that this is the trigger and then the

box over here is the child that’s being

animated and one interesting effect of

this is that if you hover over a box

we’re going to have obviously I’m sorry

if you hover over trigger

obviously we have it triggering but if

you hover over box as well which is a

child of trigger it’s still triggered so

one way to overcome that is you could

say go to box here and say um what is it

it’s pointer events none

now what pointer events does is it says

don’t register any hovers or clicks on

this element it’s just an element that

you cannot interact with you can just

see it so when I hover over the trigger

obviously it’s it’s moving but when I

move that hover onto the box it doesn’t

recognize any hovers or clicks on it so

when we’re going up there this this guy

right here pointer events is super

helpful when you’re using um like

JavaScript or something later when you

need to interact with things and make

sure some things don’t trigger something

so remember pointer events it’s a big

one when I’m going to realize what that

thing was when I learned pointer events

I was like ah this is amazing why don’t

people talk about this thing more it’s

kind of like this we don’t talk about it

but it’s so powerful all right anyway

pointer events none so that’s hovering

that’s the first part of this practical

exercise that’s what we’re going to show

you there what I want to do now is show

you how to do this same thing but with

with classes okay so I’m going to pull

up some JavaScript here and I’m going to

say okay I’m going to target the trigger

and use on click so when I click it

something’s going to happen the thing

that’s going to happen is this o is this

function okay so this function here

we’re going to say grab the trigger that

you that you found or the thing you

clicked on which is well we use the

keyword of this and just say just say

you know toggle a class toggle class of

anything clicked

and so you know taro class means that if

clicked is on it then remove it if it’s

not there put it on so when you when you

click on the trigger it’ll get a class

of clicked so instead of saying trigger

hover we want to say trigger with a

class of clicked is what we’re going to

do so let’s click E and it moves now

this will stay when we’re moving around

which is the nice thing of having

JavaScript add classes you don’t need to

rely on a hover and you can click it and

it’ll go back right because we’re just

toggling that class and that class of

clicked is what triggers this transform

right that’s that’s what says we need to

we needed to be having a different type

of transform and because there’s a

transition already on it looking at for

transform changes it will do a change

got it so one thing I want to show you

more just is kind of like a little bonus

and this is not necessarily related to

how you trigger an animation but it is

fun to think about this box here has

obviously this animation on it and the

the timing function is ease in out and

this will work for anything that you use

timing functions on but chrome has this

really great pop-up window that kind of

shows you the thing over time you see

where this animation is more dense over

here and sparser in the middle and more

dense that’s because this curve here

shows you over time that we’re spending

more time and then we’re going up

quickly and spending more time at the

end that’s why it’s like a softer

transition right you can have different

different things where it’s more dense

in the beginning so we softened and have

a hard ending right there’s a lot of

different kind of curves that you can

use and they all have keywords right in

quadratic out sign things like that you

can also take these little hand handles

and move them around yourself which is

cool so like see how it gets like a

little pause in the middle

mmm something like this

OOP there’s like a little stutter I

wouldn’t recommend that one but you put

at the point is you can design these uh

these um these timing curves yourself

these are called a cubic Bezier in this

code

it’s given right here is actually

something you can copy and paste into

your own code I’m going to make this

custom cubic busy a a little a little

more bouncy and if I take this top point

and move it over we’ll see how its 1.97

if it’s over one that means it’s outside

of the box that’s why it’s kind of like

clipping here in the in the display but

what that does is it gives us this

really kind of bouncy so let me I’m

going to copy that

take it back over to my code and replace

the ease in out with this bouncy cubic

Bezier let’s move it over so you can see

the whole thing in line okay close and

see how it bounces bonk bonk bonk that’s

because my cubic Bezier is doing that

I’m not putting like you know I’m not

doing anything special other than saying

like make your busy a whale weird curve

in this 1.97

will make it go like over overshoot

where it should be so you can use cubic

Bezier to give your animations these

weird like you know flourishes or like

kind of a life that that it would not

otherwise have it have if you were using

a keyword and also I can’t remember

where I heard this but I believe that a

cubic Bezier is more performant than

using a keyword like ease in or easing

out or is easy in sine or something like

that right so that’s all I wanted to

show you with actually one more thing

one more thing triggering is important

because you need to realize how to enact

your Trent your animations so I want to

show you one thing one more thing that

that you might think would work but does

not work with the transition property

okay so let’s go back and put this

transform in box okay so we already seen

that the only way now to get it to

transform is to is to remove the

property but from the CSS and not I’m

going to remove box from the trigger

element and then in here I’ll say not

this not toggle the class but append

append a div with a class

of box okay so what this is doing i’m

using javascript to insert an element in

the document inside of trigger with the

class of box now question what do you

think will happen do you think that the

pink box will show up where it should be

in then animate to where you would like

it to be or do you think it would just

show up in the ending State well let’s

do a little click and figure it out it

ended in the ending State now it

shouldn’t be all that surprising because

we already have the transform already

declared a transition happens when

there’s a change in something so when

the box shows up and it just is already

transformed if there’s no change so you

can do this a few times there’s all

these these boxes that got added to your

document object but they don’t get an

animation now this is this is the reason

I’m bringing this up I mean you’re going

to be like duh Travis why would you even

brings up the reason I’m bringing this

up is because there is a difference

between transition which we’re looking

at in this video in animation the CSS

property which we’re looking at in next

week’s video okay so next week tune in

and I’m looking at the animation

property and it’s going to be part two

of the CSS animation series okay and

then it just made it away but but but

but this is dev tips the web B what is a

YouTube channel thank you for watching

this video on CSS animation I’m really

excited to share the rest of the series

with you soon

now these videos are available to you

because of the good work and the support

that we get from the patrons of the

community now these people have visited

patreon.com slash dev tips and made a

donation of any amount of their choosing

and there are different you know rewards

and benefits but mostly what you’re

doing right there is you’re supporting

the community because these tutorials

that I make are all for free and people

who could make a use of them to further

their career benefit their life generate

extra income or even income at all I get

a lot of emails from people saying that

like these dev tips have helped

to nail the job right land a new job get

a new client or whatever it is and those

emails really like make me excited to do

this work for you and free all you guys

who are watching and so if you want to

contribute not just to the channel and

say hey thanks Travel I believe in what

you’re doing but if you want to support

the people who benefit from this channel

go ahead and visit dev – oh sorry go

visit patreon.com slash dev tips and

there’s there’s a whole community of

their other perks and stuff seeing the

videos early dev tips chat monthly

hangouts or semi monthly incomes and

it’s a really exciting place to be free

podcast other things to see you over at

patreon.com slash dev tips and I’ll keep

on hacking and we’ll see you next week

when we’re doing CSS animation property

to learn more about CSS animations

thanks everyone

 

Leave a Reply

Your email address will not be published. Required fields are marked *