In this exercise https://www.codecademy.com/courses/learn-intermediate-css/lessons/css-transitions/exercises/timing-function, I would not see the difference after experimenting the exercise with other transition-timing-function values. Even after changing the transition duration, they still look the same.
Hi there,
Are you having issues seeing a difference in duration or transition-timing?
transition-timing: would look exponentially different with—
transition-property: max-height;
transition-duration: 1ms;
transition-timing-function: linear;
Than it would with—
transition-property: max-height;
transition-duration: 1000ms;
transition-timing-function: linear;
If it’s transition-timing, then try using a middle-ground transition-duration like 600ms and cycle through each timing-function and see if that helps. If the timing is set too fast or too slow, the timing-function may be too difficult to notice.
1 Like
Another question please, does transition works only with pseudo class?
Hey @byte6953803474
Nope, it works on the selector whether or not it has a pseudo-class or pseudo-element.
OK
Another question please, what is the difference between transition and animation?
Animation has specific constituent properties that transition doesn’t have, one example is the animation-iteration-count property where can choose how many times your animation will iterate (from 0 to infinite).
I don’t think it’s possible to do that with transition without using Javascript.
1 Like
Yeah you right, the properties are different, animation property has about 7 or 8 and transition property is just 4.
They have about 4 properties in common, which deos the same thing.
The other properties which are for animation includes: animation-fill-mode, animation-iteration-count and animation-direction.
There’s this one I saw but I don’t know if it is still in use: animation-play-state which define whether an animation should run or not
I had to do a research on my own to learn animation because I can’t find it here
You very correct, the animation still works when I define it on the a:hover, but which one is a best practice?
In this case I don’t think there is a preferred selector to apply transition, whether you choose to apply it on a or a:hover it all boils down to how and when you want the user to experience this transition, when he hover on this button or when the page loads and how long should he experience it, it’s your choice 
Most people seems to do it on :hover though, but it’s more of a common practice than a best practice (unless there is a reason ?)
1 Like
Ok thank you for taking your time to give me a better explanation
This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.