In order to create CSS Animations, we have to learn the basics of @keyframes and it’s animation properties.
As you can see above, I used @keyframes for the bubbles, scroll arrow and the color-changing title.
Along with introducing each concept, I will provide examples from how the bubbles were created so we can understand CSS Animations along with a mini tutorial on creating the bubble animations!
Definitions:
Keyframes - define the stages and styles of the animation.
Animation Properties - assign the @keyframes to a specific CSS element and define how it is animated.
Let’s talk about animation properties:
Animation properties must be added in order for your animation to work. Animation properties do two things:
They assign the @keyframes to the elements that you want to animate.
They define how it is animated.
Animation properties:
animation-name: @keyframes name (I did bubblesAnimation).
animation-duration: the time frame length, the total duration of the animation from start to the end.
animation-timing-function: sets the animation speed ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
animation-delay: the delay before our animation will start.
animation-iteration-count: how many times it will iterate through animation.
animation-direction: gives you the ability to change the loop direction, from start to end, or from end to start, or both.
Shorthand Syntax:
This is the animation property shorthand order (as I used for the bubbles) for a more concise and organized code structure:
The animation will run for 35s with a 2s animation delay before it starts.
The timing functions of the bubbles are linear as they move upwards at a constant rate and I set the iteration count to infinite as it will continue to play over and over.
The side to side movement of the bubbles is labeled as sides which is separated with a comma as it is another keyframe besides bubblesAnimations.
Ease-in-out means the bubbles will start slowly, speed up, and then slow down towards the end.
Alternate means the animation will play from beginning to end, then back to the beginning, and so on.
The bubble is scaled 2% to the left and 5% from the top and other bubbles have varying positions based on your preference.
The bubble size is determined in the transform property. I scaled this one to (0.27) (this is a very tiny bubble while my largest one is scaled at (0.9)).
Adding Vendor Prefixes:
Also you probably noticed the -webkit- and -moz- prefixes which have identical code to the animation prefix. These are just browser-specific prefixes for browser support:
Chrome & Safari: -webkit-
Firefox: -moz-
Opera: -o-
Internet Explorer: -ms-
Bubble classes in HTML:
I choose to have 13 different classes for the bubbles but it is up to you how many bubbles your would like!
Bubble wrap in HTML:
The z-index property set to -1 ensures that our bubbles will appear behind our main title.
Shadows, shape and dimensions of the Bubble:
*Click on image to enlarge*
×
The last step is design our bubbles and make them look pretty!
As you can see, we set a class="bubble" to every bubble so this piece of code will apply to each one of them.
Code explanation:
The border-radius is set to 50% for the round shape.
The height and width is 200px by 200px (although all are scaled to be different sizes, this just makes sure we get a perfect circle).
The box-shadow is set to a rgba color and the shadow around the bubbles is a greyish color to give more definition.
The inset function is great to add an inner shadow for the bubble. I went for a light lavender shade for a reflection complementing the colorful aquarium background.
