This post is an attempt to try something new, I’ve been having a hard time making large posts that go through the entire process of building a website. so I’ve decided to talk about smaller ideas instead.Here I want to talk about a CSS “trick” that Derek, my webmentor, showed me off hand in one of our meetings. he used magic to turn a regular old rectangle into one that’s breathing.
this was my introduction to CSS keyframe animations.
setup
I started with
an <img> of a cloud!and then I took two more of them and housed all three of them inside a <div>.
now they are all inside a div so I can use position to get them to overlap.position: relative; on the parent div and position: absolute; on each of the childrenand finally, I added opacity: 0.5; on all the children to get them looking all cloudy.
cool, now to the keyframes
to get the effect I wanted I needed to have each of the clouds moving in a different direction almost off sync.
to do that I had to create unique keyframes for each of them
@keyframes breatha {
0% {
transform: translate(10px, -10px);
}
50% {
transform: translate(-10px, 10px);
}
100% {
transform: translate(10px, -10px);
}
}so to break this down. translate moves the element according to the values in the parenthesis.each of the percentages indicates where the element is to be moved at that point in the journey.
so at the halfway mark, 50%, the element needs to be at the indicated place.
so the 0, 50 and 100 are the KEY frames. saying where the cloud needs to be. the travel between those frames is figured out using magic.
I had to learn the hard way to make the 100 the same as 0 so that it’s all smooth and doesn’t have a hard, jarring reset.
now I just copy-pasted that for the other two clouds and slightly changed the values so they move differently.
finally, you need to tell each of the cloud elements which keyframe sequence to follow.
.a {
position: absolute;
opacity: 0.5;
max-width: 80vw;
animation: 3s breatha infinite ease-in-out;
}using this animation property.
this breaks down into,
3s, take three seconds to complete the sequence
“breatha”, use that sequence.
done infinitely, easing in and out of the sequence.
repeat for the other two clouds, and boom! all done!!