Style-facts part 7
We all have seen some smooth transitions on fancy webpages. It looks cool, most is done with JavaScript. Not everyone knows most sliding open and close or scaling can be done with CSS. This might be even more efficient since CSS3. The 2 tools used for this are 'transition:' and 'animation:'. But what exactly is the difference between the two?
Transitions
Transitions are used to bridge the transition between 2 states of a single or a few single style attribute(s) on an element. For example: If you want slide in a side menu from the left. The start position of 'left:' needs to be specified and 'transition: left .5s ease' need to be specified. Left in the transition refers to the attribute. .5s is half a second and is the duration of our transition. Ease is the type of transition. There are many others. In this case it is one that starts and ends smooth. Linear can feel a little mechanical. If you wanted to, for instance, make it fade in as well, you would specify 'opacity: 0;' and 'transition: left .5s ease, opacity .5s ease;' to do that.
Animations
Animations are for more complex movement. Unlike transitions, animations work with key frames. Which give you full control over the animation speed and properties you want to set. The keyframe function in CSS does not actually use keyframes, like we used in ancient times in Flash. It defines its animation in two different ways: from/to or in percentages. The first uses the words 'from' and 'to' like this:
@keyframes sunFadeIn {
From {
Opacity: 0;
Background-color: red;
Top: 10px;
},
to {
Opacity: 1;
Background-color: orange;
Top: 0;
}
}
This is used for simple animations and equals 0%/100%. To orchestrate more complex ones the latter can be used. Percentages give you optimum control over the animation, like this:
@keyframes sunFadeIn {
0% {
Opacity: 0;
Background-color: green;
Top: 10px;
},
5% {
Opacity: 25%;
Background-color: green;
},
10% {
Opacity: 50%;
Background-color: yellow;
Top: 9px;
},
20% {
Opacity: 100%;
Background-color: red;
Top: 8px;
},
100% {
Opacity: 100%;
Background-color: yellow;
Top: 0;
}
}
You can make these as complex as you want. Use multiple attributes and different transition on different percentages. On top of both types of complexity, animations can be decorated with the same duration and type of animation/transition speed as transitions. What transitions can't do and what animations can, is define how it is playing. We can reverse it. Play it infinite times or once and we can make it alternate. You can even define the times it should play and if you want it to pause when you mouseover the animated object. Most things you can do with the keyframe syntax can be found here.
Keep it simple
Keep transitions simple and fast using transitions. Use the animation attribute for complex changes of styles. For objects that need to pulse and go crazy on the screen. Be aware to use both for magical and smooth movement on the screen. It's easy to drive you're users crazy with this stuff. So use it for the good, not the bad.
Until the next topic of the style facts and as always: If you have questions, comments or tips, please leave them below!
For extra style reading:
Part6: https://www.mavention.nl/blogs-cat/how-to-make-a-toggle-switch-with-css
Part5: https://www.mavention.nl/techblog/borders-and-shadows-make-design-magic
Part4: https://www.mavention.nl/techblog/how-to-make-a-responsive-grid/
Part 3: https://www.mavention.nl/blogs-cat/3-levels-of-css-selectors-to-select-all-elements/
Part2: https://www.mavention.nl/blogs-cat/shaping-elements-and-its-surrounding/
Part1: https://www.mavention.nl/blogs-cat/2-basics-you-need-to-know-to-position-elements/
