swiecaJS
My thougths on JavaScript, AWS Cloud and other aspects of being Software Engineer
There is no doubt that animations are an important part of web design. Computers are used to boolean values. Either something is true or false, right? But for human beings, this is not so simple. We feel strange if things appear out of nowhere. I hope you remember memes with cats being afraid of cucumbers. (If not check links in resources xD). Having said that, in my opinion, the most important use of animation is to present change in a controlled manner.
Look at this example below, try to hover on those boxes
See the Pen for post about animation by Karol Świeca (@khazarr) on CodePen.
I above example I have used transiton property on opacity. But what if we want some more cool action on hoover? Let’s use keyframes! The main difference between transition and animation is fact, that transition has only two states - start and end.
We need to define the name and what will happen from start (0%) to end of our animation (100%). In our case, we will have three steps
Let’s enhance opacity example. We create form-appear animation.
@keyframes form-appear {
0% {
transform: scale(0) translateY(100px);
opacity: 0;
}
50% {
transform: scale(1.05) translateY(-15px);
opacity: 1;
}
100% {
transform: scale(1) translateY(0px);
opacity: 1;
}
}
To trigger animation we need to use animation keyword.
.example {
animation: form-appear 1s ease;
}
I have added also another animation for every form element
.example > * {
opacity: 0;
animation: slideX 1s ease;
animation-delay: .5s;
animation-fill-mode: forwards;
}
@keyframes slideX {
0% {
opacity: 0;
transform: scaleX(0);
}
100% {
opacity: 1;
transform: scaleX(1);
}
}
The most important parameter here is animation-fill-mode which tells the browser to keep the final state of animation. Otherwise, after the animation ends it will go back to the initial state - in our case opacity: 0.
See the Pen post about animation #2 by Karol Świeca (@khazarr) on CodePen.
resources