Learning to Code: Day 18 — Applied Visual Design Part 8
Hey everyone, hope you’re keeping well, today’s lessons bring us to a close on Applied Visual Design with FreeCodeCamp.
Let’s pick up where we left off with animations.
—
Create a Heartbeat in CSS Animations
Using the animation-iteration-count:infinite; we can create a heartbeat of the heart element we created the other day. A continuous cycle of animation that mimics the look of a heart beating.
There will be two animations happening within a 1 second period. The colour change and the size change. Let’s take a look at the code:
<style>
.back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
animation-name: backdiv;
animation-iteration-count: infinite;
animation-duration: 1s;
}
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
animation-name: beat;
animation-iteration-count: infinite;
animation-duration: 1s;
}
.heart:after {
background-color: pink;
content: “”;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart:before {
background-color: pink;
content: “”;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
@keyframes backdiv {
50% {
background: #ffe6f2;
}
}
@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
}
</style>
<div class=”back”></div>
<div class=”heart”></div>
As we can see, the .back is referring to the background and on a infinite loop, the colours pulse at the 50% mark to pinkish. Then we have the .heart selector in an absolute position (centered in the browser) which the pseudo-classes ::before and ::after are grouped to, all moving to a smaller scale size of 0.6 of the original size at the 50% mark. This gives the effect of a beating heart action repeating over and ove
Animate Elements at Variable Rates
If we have multiple animated elements, we can simply alter the animation time (the percentage markings) at which they take action. By varying the percent of each separate animation, we can make each animation have it’s own individual timing. Take this chunk of code for example which looks at the twinkling of two star animations:
.star-1 {
margin-top: 15%;
margin-left: 60%;
animation-name: twinkle-1;
animation-duration: 1s;
}
.star-2 {
margin-top: 25%;
margin-left: 25%;
animation-name: twinkle-2;
animation-duration: 1s;
}
@keyframes twinkle-1 {
50% {
transform: scale(0.5);
opacity: 0.5;
}
}
@keyframes twinkle-2 {
20% {
transform: scale(0.5);
opacity: 0.5;
}
}
Notice how the percentage for twinkle-1 is set at 50% and twinkle-2 is at 20% in the Keyframes rules? This means that the first twinkle animation will peak at half way through the 1 second animation period (the 50% mark), wheres as the other will peak at a fifth (the 20% mark) of the way through it’s animation at the same time. Therefore creating a varied animation of twinkling.
we could also alter the animation-duration of each animation if we wanted to, which would give the same result as above.
Changing the Animation-Timing-Function with Keywords
Let’s look at a new property of animation, the fifth property that we have covered now, the animation-timing-function.
Imagine a car driving from one point to another, the animation-timing-function determines how much the car accelerates or decelerates over that period.
A couple keywords to know are:
ease : starting slow, speeding up then slowing down again.
ease-out : starting fast and slowing down.
ease-in : which starts slow and speeds up.
linear : applies a constant speed throughout.
So for example if we applied an animation-timing-function: ease-out; declaration to an animation in it’s selector, the affected element will then start fast and slow down towards the end of it’s animation. Easy.
Bezier Curves
Instead of the generic values above, we can finely tune an animation using a Bezier curve, called the cubic-bezier function in the code. Imagine an X and Y-axis. The X-axis is the time duration of the animation and the Y-axis is the progress in the animation. The curve is marked on a 1 by 1 coordinate system, with four main points set out as p0, p1, p2 and p3.
p0 and p3 are the start and end of the curve (0,0 and 1,1 respectively) and are previously defined and fixed. When writing the positions of p1 and p2, they are defined as so: (x1,y1,x2,y2), with p1 being x1,y1 and p2 being x2,y2. Okay, let’s see that all-together visually with the example from Newton meets CSS:
Makes sense right? The p1 and p2 define the shape of the Bezier curve, as the lower and upper half of the curve will be pulled toward those two points. If you’ve ever messed about with Photoshop’s RGB graphs you’ll know what I mean.
Here’s an example of the Bezier curve written in CSS:
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
This gives the same result as linear, as these points line up straight diagonally from bottom left of the graph to the top right, from 0,0 to 1,1.
Another example alike to the ease-out value would be:
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
This would appear as a fast progression through the X-axis (time) slowing down near the end as the line curves out to reach the 1,1 position. Like a line going straight up then branching to the right.
Making More Natural Movement with the Bezier Curve
Let’s go for something really naturalistic. I took a break midway through this blog and took a walk, imagining how rain would look in the curve, dripping from a drain, or something similar that falls. But let’s stick to the example from FreeCodeCamp today, looking at a green ball being juggled. Just imagine the juggler is invisible.
When we write the coordinates for the x1,y1,x2,y2, we can write the y-axis higher than the limitation of the 1 by 1 coordinate system, whereas the x-axis is limited to the 1 by 1 coordinate system (between 0–1). This means that we can make a bouncing ball for example, making an animation faster in a shorter length of time.
Let’s affect the id attribute “#green” for the ball in this example and alter it’s animation-timing-function. You’ll see the background property of the ball and how far it’s offset to the right of the browser, with the left offset.
Also, notice how the y2 coordinate is above the limitations of the 1 by 1 coordinate system perameters (above 1):
#green {
background: green;
left: 75%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
—
And with that, we have swiftly come to the end of this section in Applied Visual Design!
Next time we’ll be diving into Applied Accessibility Challenges, which looks at the user interface (frontend development) which “can be understood, navigated, and interacted with by a broad audience” (FreeCodeCamp).
Til then my good friends. Stay safe and see you tomorrow!
