What is the difference between transition and animation property in CSS
Hello guys, can someone explain what is the difference between a transition and an animation in css please, like those 2 seems to be the same in the sense that they add some "effects" to our web page but I don't really know when we should use one over the other, like when to use what and their use cases
23 Replies
Really depends what you mean
but in CSS it self animation is keyframes
transition is a single thing like :hover
Like when say I add a small "animation" on width, like when width changes from x px to y px, here we would use transition
well ig not really single since you can transition all but you get me š
#depends?
It could be either
hmm what do you mean "self animation is keyframes" like I know the @keyframes is used to define an animation
I'm strickly speaking from a CSS language standpoint. Not what the mean.
Animation= keyframes, Transition just itself
hmm from what I've understood, an animation can be a transition but a transition can't be an animation because an animation can have several states, like a 0%, 25% etc while a transition can't
correct for CSS
from a meaning standpoint its always a debate what means what š¤£
I missed where you said a line animation?
oh another post
hmm wdym
ahh
yeah š
confusing man xD
sorrryy
you could have asked this in that post honestly
would have made way more sense with context too
ahhh sorry, will do that wait
Hello guys, can someone explain how to create an animation line moving around a container in css, like we have a container with border radius set, the line moves along the container
Coding2GO
YouTube
Learn CSS Border Animations in 6 Minutes
Learn all types of CSS Border Animations in 6 minutes with explanations about animations, css pseudo-elements ::before and ::after and how to create a border animation in css using conic-gradients and css variables (custom properties). In this tutorial, we'll show you how to create border animations is css with a glowing border effect and rotati...
oohhhh
thanks !!
Kevin Powell
YouTube
Animated Glowing Border // Easy to Customize CSS Effect
I was inspired to try and recreate a Dribble shot by Aaron Iker - https://dribbble.com/shots/17674758-Button-Glow
š Links
ā
The Dribbble shot that inspired this: https://dribbble.com/shots/17674758-Button-Glow
ā
Conic CSS by Adam Argyle: https://www.conic.style/
ā
The finished code: https://codepen.io/kevinpowell/pen/rNrdzdx
ā Timestamps
00:00...
Lots of examples on Codepen too
yep I will have a look, really appreciate, thanks ! šÆ
A transition in itself does nothing.
When you define a transition you are just defining how a property will change from one state to another. However it us not actually animating or changing anything.
For example:
With that code we have not animated anything, we have just set the element up so that, if it does change the color, it will do so with a transition of 1 second.
To actually create any change you need another event, be it a pseudo event or by the color being changed externally, eg. via JavaScript.
So this hover event will cause the transition from the original blue to red over 1 second:
On the other hand, an "animation" is an actual animation which causes an element to change the properties defined over a period of time, divided up by keyframes, normally defined as a percentage of the time assigned.
An animation does not (necessarily) require any events or changing of the element properties.
For example:
This code will make the element go red every second, well, every half a second and then back to blue again without any interaction by the user.
ah I see, like a transition, we need something to trigger it, like an event like you mentioned, but for animations, everything happens on its own?
yes. With transitions you are only defining how the animation (transition) will occur. Not actually initiating anything. The event needs to define a new state (eg color) and the "transition" is defining how the element will change from it's current state to it's new state. Transitions themselves are not animations.
Animations are the actual animations. As you say, they happen on their own (though they can be controlled by other events if required).
yep I see, when you say "they can be controlled by other events" like using a variable which triggers a particular animation at a particular point in time ?
for example, yes.
Within the animation properties you have the animation-play-state which can either be "running" (default) or "paused". You can update this play state with an event such as a "hover", eg:
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state
There are of course other ways that the animation can be initated.
Yep I see, I have a clearer idea now, ty !!