Shop More Submit  Join Login
×

:iconim-not-sana: More from im-not-sana


Featured in Collections

CSS Tips by poserfan

css tutorials by MelikeBAt


More from deviantART



Details

Submitted on
May 31, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
4,058 (6 today)
Favourites
77 (who?)
Comments
23
×

PE: CSS3 101 - Transition Animations

Fri May 31, 2013, 9:19 PM
PE 2010 stamp by projecteducate





Table of Contents


This article has four main topics:



Legend:
:dalogo: - Works in dA for All Members
:dalogo: - Doesn't work in dA for Premium Members
- Works in dA for Alpha Testers at devBUG



What is a Transition?


This time, I'll explain with an example. Let's take this awesome emote Sword Tard by jahw  by jahw.
When I see that emote, I'm imagining it saying "CHAAAARGE!" and running forward! So I want to make the emote do that, but instead of opening it up in Photoshop to animate (which I'm not allowed to do anyway since it's not my work), I'm just going to add a simple code that will do the animation for me! Hover over the emote below to see this magic in action!
Fig. 1 - Hover over the emote

Now on to the technical definition :B Basically transition allows the coder to change CSS properties smoothly from one value to another over a given duration. Whereas without CSS3, this is how the emote would change distance on hover:
Sword Tard by jahw
Fig. 2 - Hover over the emote

As you can see the change looks very abrupt and unrealistic. But thanks to CSS3's transition property, we can make our webpages attractively interactive by animating CSS properties from its old state to the new state over a period time.

Now that's what I'm talking about!



Transition-property



This specifies the name of the CSS property to which the transition is applied. For the example in Fig. 1, the CSS property I used to change was the padding-left. I could also have used left or magin-left to achieve similar results.

Fig. 1 - transition-property: padding-left;

CSS
img{
padding-left: 0;
transition-property: padding-left;

/* Webkit Browsers */
-webkit-transition-property: padding-left;
 
/* Firefox */
-moz-transition-property: padding-left;

/* Opera */
-o-transition-property: padding-left;
}

img:hover{
padding-left: 100px;
transition-property: padding-left;

/* Webkit Browsers */
-webkit-transition-property: padding-left;
 
/* Firefox */
-moz-transition-property: padding-left;

/* Opera */
-o-transition-property: padding-left;
}


Note: Adding just this will not give the smooth effect yet, go to the next section to know how.

Example of CSS properties that can be animated:


position of elements top bottom left right in length by px or percentage%
size of elements width or height in px or %
margins of element with either margin affecting all margins
or margin-top margin-bottom margin-left margin-right in px
padding of element with either padding affecting all padding
or padding-top padding-bottom padding-left padding-right in px
opacity of an element in a number
color value in #HEX or rgba() for text
font-size for text in px
text-shadow for text in shadow-list format: color, x, y, blur;
background-color with color values
border of element with either border affecting all borders
or border-edge-color and border-top-width where edge can be changed to top bottom left right


Transition-duration



This property defines the length of time that a transition takes - how long from the old value to the new value? If you do not add this property, the value will be "0s" by default which means that the transition is immediate and not smooth. By adding a value like 1s, you can see the animation go smoother like in Fig. 1. You can change the duration as you like, if you want it to go slower, it could take 3s instead.

Fig. 1 - Click Here for Live Preview

CSS
img{
padding-left: 0;

/* All Browsers */
transition-property: padding-left;
transition-duration: 1s;
 
/* Webkit Browsers */
-webkit-transition-property: padding-left;
-webkit-transition-duration: 1s;
 
/* Firefox */
-moz-transition-property: padding-left;
-moz-transition-duration: 1s;

/* Opera */
-o-transition-property: padding-left;
-o-transition-duration: 1s;
}

img:hover{
padding-left: 100px;

/* All Browsers */
transition-property: padding-left;
transition-duration: 1s;
 
/* Webkit Browsers */
-webkit-transition-property: padding-left;
-webkit-transition-duration: 1s;
 
/* Firefox */
-moz-transition-property: padding-left;
-moz-transition-duration: 1s;

/* Opera */
-o-transition-property: padding-left;
-o-transition-duration: 1s;
}


As you can see, there should be a transition-duration specified for when the animation takes on hover and when it's off hover. So that it goes smoothly when you point your mouse over it and after you take the mouse off. The time doesn't have to be the same for both. You can make it go slower when it's returning back to its original value.

Go ahead and play around with the duration property here to see it happen in action :)

Transition-timing-function



This property describes how the values used during a transition will be calculated. It allows for a transition to change speed over its duration. For example, if I want an animation to look like it's running from one location to the other, it can start really fast at first like a sprinter in real life does, then go at a slower constant speed, then pick up speed again towards the end. These effects are commonly called easing functions and a mathematical function that provides a smooth curve is used. There's two ways to define the timing functions: a stepping function or a cubic Bézier curve.

A stepping function is easy to understand. It just divides the number of steps into equally sized intervals. The function also specifies whether the change in output percentage happens at the start or end of the interval (in other words, if 0% on the input percentage is the point of initial change). ex: steps(2, start)


Fig. 3 - Stepping Function

A cubic Bézier curve is defined by four control points, P0 through P3 (see Fig. 4). P0 and P3 are always set to (0,0) and (1,1). The transition-timing-function property is used to specify the values for points P1 and P2.

These can be set to preset values using the keywords like ease-in or can be set to specific values using the cubic-bezier function ex: cubic-bezier(0, 0, 1, 1)


Fig. 4 - Bézier curve

Keywords with its equivalent in the cubic-bezier


ease = cubic-bezier(0.25, 0.1, 0.25, 1)
linear = cubic-bezier(0, 0, 1, 1)
ease-in = cubic-bezier(0.42, 0, 1, 1)
ease-out = cubic-bezier(0, 0, 0.58, 1)
ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)
step-start = steps(1, start)
step-end = steps(1, end)

Fancy Menu Using ease-in



Fig. 5 - Click here to see Template!

In the template I made here I have the code and the html where you can see that the menu class has the transition property in which it eases in when hovered on and hover off.

Transition-delay



This property defines when the transition will start. It allows a transition to start executing after some time when an action is applied. For example, an animation can start 5 seconds after I hover over the element. It is 0s by default which means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset.

transition-delay: 3s;

Fig. 6 - Hover until the image changes

As you can see in the example above, the image doesn't change until after 3 seconds have passed, so the animation doesn't occur until after a certain time that the coder has defined. You can find the template here!

Transition


This basically groups all the four previously mentioned properties together in one property in the following order:

transition: transition-property, transition-duration, transition-timing-function, and transition-delay;

Here's how we could use all the properties for one animation:

Fig. 7 - Hover to see effect

I've changed two CSS properties for the example above: width of the image and the background-color so this is how the syntax would look:

transition: width 1s ease-in, background-color 1s ease-in;

What if I have too many transition properties with the same timing functions?


Well, quite easily, instead of name ALL the properties and separating them out by commas, you can simply just add all to your code. (Thanks to jonarific for pointing it out!) So the new syntax would now look like this:

transition: all 1s ease-in;

That's about all there really is to it! :la: If you wanna test your knowledge and challenge your skills, check out the small contest below!

Mini-Contest


For 100 :points:, create a snazzy drop-down menu using the template provided with transitions and bonus points for whoever makes it look appealing using gradients or any other properties mentioned in previous articles! :eager:

Save your work on
and link your snippet in the comments below!
Ends on June 7th :)

Good luck! :la:



TL;DR - Documentation



transition-property: property;

transition-duration: time;

steps(integer, start)
steps(integer, end)

cubic-bezier(number, number, number, number)
cubic-bezier(x1, y1, x2, y2) curve where both x values must be in the range [0, 1] or the definition is invalid. The y values can exceed this range.

transition-timing-function: ease; transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
transition-timing-function: linear; = transition-timing-function: cubic-bezier(0, 0, 1, 1);
transition-timing-function: ease-in; = transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
transition-timing-function: ease-out; = transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
transition-timing-function: ease-in-out; = transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
transition-timing-function: step-start; = transition-timing-function: steps(1, start);
transition-timing-function: step-end; = transition-timing-function: steps(1, end);

transition-delay: time;

transition: transition-property, transition-duration, transition-timing-function, and transition-delay;
All four properties grouped together


Useful Links



CSS3 Animated Journal Skin by DEVlANT




For Non-Alpha Members, if you'd like to try having CSS3 effects look at this great tutorial by Fli-c




If you'd like to learn more about CSS basics, I suggest you have a look at these groups:
:iconcss-dyk: :iconecssited:
Create your own Journal Skin by miontre
Prefix CSS Generator

Test out CSS3 snippets with an instant Live Preview in this CSS Sandbox:





The article you've all been waiting for! How to create cool animation-like effects using Transitions in CSS3 with live examples and sample codes!

CSS3 101 Topics:
May 27th - Introduction
May 28th - Color Gradients
May 30th - Pseudo-elements & Pseudo-classes
May 31st - Transition Animations
June 2nd - Conclusion
Add a Comment:
 
:iconmoiscen:
Moiscen Featured By Owner Jun 8, 2014  Student Traditional Artist
That's really cool, oh my gosh *0* I love how you explain it so well! I wish I could be able to use that kind of CSS;
Reply
:iconsulaman:
sulaman Featured By Owner Oct 1, 2013
Hi, 

Have made a similar website, based on CSS3. 


Hope this may help you.

Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 4, 2013  Hobbyist General Artist
So wait... I take it you have Alpha privs again or you have magic CSS3 going on? ;D
Reply
:iconim-not-sana:
im-not-sana Featured By Owner Jun 4, 2013  Hobbyist General Artist
I used =Fli-c's hax :B but hope it was enough to understand? (couldn't note you cause wrote all these up last minute x.x) lemme know if you have any questions about CSS3 though :)
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 5, 2013  Hobbyist General Artist
:D Oh yes, I've read that one before, it is pretty brilliant. But waaay complicated, good thing there is a generator, else it would hurt people's brains too much to try to figure it out. It kinda resembles math.... Which makes me run away!

I will send you inquires when I think of them ;D
Reply
:iconim-not-sana:
im-not-sana Featured By Owner Jun 6, 2013  Hobbyist General Artist
I actually love math :paranoid: probably the reason I studied Computer Science instead of med school :lol:

Yeah, pretty brilliant indeed! Had to use it without the generator though to get the transition effects in this journal, but it definitely makes it easier for everyone else :nod:
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 6, 2013  Hobbyist General Artist
I like math, though I am not particularly good at it. Though ?i do like science and science is very math oriented. I failed my math classes in high school. Maybe because I was so confused from taking 4 years of various Algebra classes and nothing else.
Reply
:iconiamoret:
iAmoret Featured By Owner Jun 3, 2013  Hobbyist Photographer
This is so cool! :la: Too bad us normal peoples can't use it. :saddummy:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner Jun 3, 2013  Hobbyist General Artist
Aww, I know they really should release it already :hmm:
Reply
:iconiamoret:
iAmoret Featured By Owner Jun 3, 2013  Hobbyist Photographer
C'mon, dA, PICK UP THE PACE! :iconasdfyellrightplz:
Reply
Add a Comment: