Lets get coding - CSS Animations 3

From now I would like to dwell in to some applications and examples of CSS animations. I do not want to get into some very complex animations but, some nice and simple one. For today I want to explain a quite basic yet, beautiful looking animation. 

See the Pen Second Lesson by Original-Coding-Cult (@original-coding-cult) on CodePen.

HTML

For the HTML part we just need to do some formalities. We just need to create 4 divs with their id as 'sq1', 'sq2', 'sq3' and 'sq4'.

<div id="sq1"></div>
<div id="sq2"></div>
<div id="sq3"></div>
<div id="sq4"></div>

Note: In the CodePen, I have nested these divs inside a div with the id 'Con' and the values used in the CodePen and in this lesson differ. I have done that just to make the CodePen to run smoothly after embedding. 

CSS I

Before styling the divs, lets format the body and declare some variables. Declaration of variables is done in side the root pseudo class as shown below.

:root {
    --dimen: 100px;
    --loc: calc(var(--dimen)/2);
    --X: 150px;
    --Y: 150px;
    --time: 2s;
}

We can then later use these variables like so.

var(--variable)

Now lets style our body.

body {
    background-color: black;
    padding: 0;
    margin: 0;
}

We should now proceed to the divs. All the divs will have the same styling except for their transform. Therefore, to make the everything easier to understand and read, I will be omitting the styles that are common between squares and only show their transform style. First the styles that are common.

all_the_squares {
    height: var(--dimen);
    width: var(--dimen);
    position: absolute;
    background-image: linear-gradient(-145deg, pink, orange);
    animation: square_id var(--time) alternate infinite ease-in-out;
}

Now their location.

#sq1 {
    transform: translate(calc(var(--X) - var(--loc)), calc(var(--Y) + var(--loc)));
}

#sq2 {
    transform: translate(calc(var(--X) + var(--loc)), calc(var(--Y) + var(--loc)));
}

#sq3 {
    transform: translate(calc(var(--X) + var(--loc)), calc(var(--Y) - var(--loc)));
}

#sq4 {
    transform: translate(calc(var(--X) - var(--loc)), calc(var(--Y) - var(--loc)));
}

CSS II

Now we can begin with the animations. Again, all of squares have the same keyframes, the only difference is in the pluses and minuses. At the 0% the transform is same as shown above and at 90% and 100%, instead of adding or subtracting the variable loc, we will add or subtract variable dimen. The keyframes code will look something like this for the first square and why don't you guys take up the challenge to code the keyframes for the other squares. :D

@keyframes sq1 {
    0% {
        transform: translate(calc(var(--X) - var(--loc)), calc(var(--Y) + var(--loc)));
    }
    90% {
        transform: translate(calc(var(--X) - var(--dimen)), calc(var(--Y) + var(--dimen))) rotate(90deg);
    }
    100% {
        transform: translate(calc(var(--X) - var(--dimen)), calc(var(--Y) + var(--dimen))) rotate(90deg);
        filter: hue-rotate(-90deg);
    }
}

The filter style, adds this beautiful color changing effect to the animation.

That is it for today and I hope you guys liked this animation. In the next lessons, I would be focusing on certain techniques and skills used while animating. Till then, happy programming!