How to create an animated flask using CSS

Today I want to talk about how I created an animated flask using only CSS3. The result can be seen here . Well, what's interesting? Then let's get started!

We study the problem

The flask consists of many versatile shapes, but the possibilities of CSS are limited and do not allow us to create such elements. How do we do? We implement them with triangles and rectangles.

• Pseudo-elements: Before and: After
• Position, top, right, bottom, left, z-index
• Border, width and height

The implementation of the base of the flask

The base has a triangular shape, so we will make it with a triangle. To do this, I will create the following markup:

<div class="flask"> <div class="flask__bottom"> <div class="flask__triangle"></div> </div> </div> 

I use the main element with the flask class, which will have the base with the flaskbottom class. We have added a blank for the future triangle to it. Next, I stylize the markup:

 body { background-color: #292548; } .flask { height: 405px; width: 368px; position: absolute; bottom: 0; } .flask__bottom { position: absolute; bottom: 0; } .flask__triangle { width: 368px; height: 250px; overflow: hidden; position: relative; background-color: #fff; } 

I fixed the base at the bottom of the bulb, using the properties position: absolute and bottom: 0. Then I gave it a width of 368 pixels and a height of 250 pixels. As a result, we have a rectangle.

Now the fun begins! How do we make a triangle ?! For this, I will use the pseudo-elements before and after. Using them, we will create right triangles and place them on top of the white rectangle from the left and right edges, respectively. Thus, hiding part of its area.

But first we need to make right triangles. To do this, I will add the following CSS code:

 .flask__triangle::before, .flask__triangle::after { content: ""; width: 0; height: 0; border-top: 250px solid #292548; position: absolute; top: 0; z-index: 100; } .flask__triangle::before { border-right: 152px solid transparent; left: 0; } .flask__triangle::after { border-left: 152px solid transparent; right: 0; } 

The basic technique for creating CSS triangles is using the border property. But first you need to set the width and height of the elements to 0, for the correct calculation of the size of the triangles.

Next for them I set the border-top property equal to 250 pixels and the color # 292548 (background color). Next, for the left triangle, I specify the border-left property with a value of 152 pixels. I will do the same for the right triangle, but instead of border-left I will register border-right.

Then place them along the edges of the rectangle, using the properties of left and right. And we have a triangle!

Create base elements

Now we turn to the implementation of the elements of the foundation To do this, add the following markup:

 <div class="flask"> <div class="flask_bottom"> <div class="flask__triangle"> <div class="flask__bottom-one"></div> <div class="flask__bottom-two"></div> <div class="flask__bottom-five"></div> <div class="flask__bottom-six"></div> <div class="flask__bottom-seven"></div> <div class="flask__bottom-eight"></div> </div> </div> </div> 

And I stylize it with the following code:

 .flask__bottom-one { width: 0; height: 0; border-bottom: 55px solid #3a2481; border-left: 32px solid transparent; border-right: 42px solid transparent; position: absolute; bottom: 0; z-index: 4; } .flask__bottom-two { width: 0; height: 0; border-bottom: 165px solid #4266c0; border-left: 93px solid transparent; border-right: 200px solid transparent; position: absolute; bottom: 0; left: 0; z-index: 2; } .flask__bottom-five { width: 100%; height: 75px; background-color: #4248c0; position: absolute; bottom: 18px; left: 50px; z-index: 3; transform: rotate(24deg); transform-origin: left top; } .flask__bottom-six { width: 100%; height: 170px; background-color: #37acdd; position: absolute; right: 0; bottom: 0; z-index: 1; } .flask__bottom-seven { width: 100%; height: 218px; background-color: #1493c8; position: absolute; right: -95px; bottom: 24px; z-index: 3; transform: rotate(24deg); transform-origin: right top; } .flask__bottom-eight { width: 100%; height: 50px; background-color: #5c30ae; position: absolute; right: -95px; bottom: 218px; z-index: 3; transform: rotate(-12deg); transform-origin: left top; } 

An important step in creating elements is to preserve the triangular shape of the base. When positioning its parts, they will go beyond the triangle, so I added the overflow property with the value hidden for their parent.

Next, we need to create 6 elements and, using the properties transform (with the value rotate) and transform-origin, arrange them as we need. In our case, the transformation is needed to rotate the elements, and transform-origin - to specify the point around which we rotate the elements. Also, using absolute positioning, we place the elements in their places. As a result, we get:

Create a neck and its elements

To create a neck, we need to create a rectangle with dimensions of 62 pixels by 152 pixels and place all 4 elements inside. To do this, I will add the following markup:

 <div class="flask"> <div class="flask__throat"> <div class="flask__throat-one"></div> <div class="flask__throat-two"></div> <div class="flask__throat-three"></div> <div class="flask__throat-four"></div> </div> <div class="flask_bottom"> <div class="flask__triangle"> <div class="flask__bottom-one"></div> <div class="flask__bottom-two"></div> <div class="flask__bottom-five"></div> <div class="flask__bottom-six"></div> <div class="flask__bottom-seven"></div> <div class="flask__bottom-eight"></div> </div> </div> </div> 

And css:

 .flask__throat { width: 64px; height: 155px; overflow: hidden; position: absolute; top: 0; left: 152px; } .flask__throat-one { width: 150px; height: 50px; background-color: #5c30ae; position: absolute; top: 110px; right: -26px; z-index: 3; transform: rotate(24deg); transform-origin: right top; } .flask__throat-two { width: 150px; height: 60px; background-color: #37acdd; position: absolute; top: 35px; right: -35px; z-index: 3; transform: rotate(20deg); transform-origin: right top; } .flask__throat-three { width: 100%; height: 50px; background-color: #5c30ae; position: absolute; bottom: 0; right: 0; z-index: 3; } .flask__throat-four { width: 150px; height: 20px; background-color: #6c49ac; position: absolute; top: 100px; right: -45px; z-index: 3; transform: rotate(20deg); transform-origin: right top; } 

The principle of the arrangement of elements is exactly the same as that of the base elements. So this task should not cause you any difficulties! As a result, we got a finished flask!

Bubble animation

We will load the flask and after a while bubbles will appear from it. They will be of different size and color. The frequency of occurrence will be different.

To implement the bubbles, we will use modern features of CSS, namely the border-radius property. With this property you can round the corners of the element. Now we will create 3 multi-colored bubbles of the same size, one slightly larger, and another large one. To do this, we need to add the following markup:

 <div class="flask"> <div class="circle circle_small"></div> <div class="circle circle_middle"></div> <div class="circle circle_little circle_little-white"></div> <div class="circle circle_little circle_little-purpure"></div> <div class="circle circle_little circle_little-blue"></div> <div class="flask__throat"> <div class="flask__throat-one"></div> <div class="flask__throat-two"></div> <div class="flask__throat-three"></div> <div class="flask__throat-four"></div> </div> <div class="flask_bottom"> <div class="flask__triangle"> <div class="flask__bottom-one"></div> <div class="flask__bottom-two"></div> <div class="flask__bottom-five"></div> <div class="flask__bottom-six"></div> <div class="flask__bottom-seven"></div> <div class="flask__bottom-eight"></div> </div> </div> </div> 

And add css:

 .circle { border-radius: 50%; border: 1px solid #fff; position: absolute; top: 30px; left: 48%; } .circle_small { width: 20px; height: 20px; } .circle_middle { width: 45px; height: 45px; margin-left: 2px; left: 42%; } .circle_little { width: 5px; height: 5px; margin-left: 4px; } .circle_little-white { background-color: #fff; } .little_circle_purpure { background-color: #6c49ac; border: 1px solid #6c49ac; } .circle_little-blue { background-color: #117fba; border: 1px solid #117fba; } 

The next step is to create an animation script using the @ keyframes property. The script itself will be as follows. When the page loads, the bubbles have initial coordinates of 20 pixels along the Y axis. When the animation starts, the bubbles start moving along the Y axis from the initial coordinate to -200px. In parallel with the movement along the Y axis, the bubbles will gradually move away from use. For this we use the transform property. Also, when bubbles move, they smoothly disappear using the opacity property.

The script has been created, now we need to specify it in the circle class. To do this, use the animation-name property and specify the script name - circle. Further, for each bubble we set the delay using an animation delay, and thus they will appear at a different time interval. The final step is to set the animation-iteration-count parameter for the infinite repetition of the animation script.

 .circle { animation-name: circle; animation-duration: 5s; animation-iteration-count: infinite; animation-delay: 0s; } .circle_little-white { animation-duration: 4200ms; } .circle_little-purpure { animation-duration: 4200ms; animation-delay: 200ms; } .circle_little-blue { animation-duration: 4200ms; animation-delay: 600ms; } @keyframes circle { 0% { transform: translateZ(0px) translateY(20px) scale(1); opacity: 1; } 85% { opacity: 0; } 100% { transform: translateZ(0px) translateY(-200px) scale(0); opacity: 0; } } 

Bulb animation

To animate the bulb, I created my own script for each element:

 @keyframes animation_bg_element1 { 0% { border-bottom-color: #3a2481; } 25% { border-bottom-color: #242781; } 50% { border-bottom-color: #244081; } 75% { border-bottom-color: #242781; } } @keyframes animation_bg_element2 { 0% { border-bottom-color: #4266c0; } 25% { border-bottom-color: #4287c0; } 50% { border-bottom-color: #42a8c0; } 75% { border-bottom-color: #4287c0; } } @keyframes animation_bg_element3 { 0% { background-color: #4248c0; } 25% { background-color: #4269c0; } 50% { background-color: #428ac0; } 75% { background-color: #4269c0; } } @keyframes animation_bg_element4 { 0% { background-color: #37acdd; } 25% { background-color: #37d8dd; } 50% { background-color: #37ddb5; } 75% { background-color: #37d8dd; } } @keyframes animation_bg_element5 { 0% { background-color: #1493c8; } 25% { background-color: #14c2c8; } 50% { background-color: #14c89d; } 75% { background-color: #14c2c8; } } @keyframes animation_bg_element6 { 0% { background-color: #5c30ae; } 25% { background-color: #3a30ae; } 50% { background-color: #3048ae; } 75% { background-color: #3a30ae; } } @keyframes animation_bg_element7 { 0% { background-color: #6c49ac; } 25% { background-color: #5249ac; } 50% { background-color: #495aac; } 75% { background-color: #5249ac; } } 

Now I will add an animation call in each class:

 .flask__throat-one, .flask__throat-two, .flask__throat-three, .flask__throat-four { animation-duration: 5s; animation-iteration-count: infinite; animation-delay: 0s; } .flask__throat-one, .flask__throat-three { animation-name: animation_bg_element6; } .flask__throat-two { animation-name: animation_bg_element5; } .flask__throat-four { animation-name: animation_bg_element7; } .flask__bottom-one, .flask__bottom-two, .flask__bottom-five, .flask__bottom-six, .flask__bottom-seven, .flask__bottom-eight { animation-duration: 5s; animation-iteration-count: infinite; animation-delay: 0s; } .flask__bottom-one { animation-name: animation_bg_element1; } .flask__bottom-two { animation-name: animation_bg_element2; } .flask__bottom-five { animation-name: animation_bg_element3; } flask__bottom-six { animation-name: animation_bg_element4; } .flask__bottom-seven { animation-name: animation_bg_element5; } .flask__bottom-eight { animation-name: animation_bg_element6; } 

Conclusion

In this article, I showed you the advanced features of CSS. I hope that you will have an interest in this, and you can create spectacular work. Thank!

Demo with 3 flasks