Animation is an interesting way of making your site attractive. It plays an important role in engaging visitors on your site and improves usability. It is becoming an advanced CSS concept. Animations are a User-interface delight.
The developer uses basic concepts of CSS property with animation properties for changes, continuity, movement, and actions of elements present on a web page. CSS transition also helps in movements and changes on the web page. However, for complex changes, animations are needed. Animations work in loops, and they can change CSS properties and values inside the keyframes. CSS Animations help in responsive web designing.
Flex-box is used to layout content on a webpage screen. It has two properties; one is flex-container, and the other is flex items/elements. Flex-box Animations can be applied to layout properties, including grid and flex-box. Animation in CSS with flexbox gives a concept of responsiveness.
In this tutorial, animations implemented on Layout with CSS Flex-box will be discussed with examples. In simple words, flexbox animations in CSS will be explained. It will contain program code along with output snapshots for a deeper understanding of the topic.
Table of Contents
Keyframes:
Keyframes are used in CSS animations for making complex multi-state animations. They control the details like timing or duration of animation working.
In the basics of CSS, there are many animation properties, and the most common animation properties are:
CSS Animation Short Syntax:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation: 3s ease-in 1s 2 reverse both paused slide-in;
CSS Flexbox Properties:
CSS flexbox is best for the general layout of the website and application in the project with flexbox. It makes the alignment of items/elements quite simple vertically and horizontally using rows and columns. Flexbox makes responsive design easier. It can produce responsive layouts.
If you want to use flex-box, the following code is required.
.container {
display: flex;
}
Flexbox has two kinds of properties, i.e., Flex Container and Flex Items/Elements.
Here is the list of CSS flexbox properties:
CSS for Containers:
CSS for Flex Items:
CSS Flex-box Animations:
We will use the above-mentioned common animation properties for making flex-box animations. It comes under the umbrella of advanced CSS Animations. Following are two examples showing modern CSS techniques and flexbox animations with advanced CSS skills. Output videos having animations are attached for proper understanding.
Example No.1:
Here we are using flex-grow and CSS knowledge. As the name suggests, this property makes flex items or child elements grow as the parent container increases in size horizontally in the flexbox layouts. The numerical values are accepted for the relative growth.
<!DOCTYPE html>
<html>
<head>
<style>
.containerbox {
height: 300px;
border: 1px solid black;
display: flex;
}
.box {
font: 16px;
background: rgb(99, 201, 196);
flex-grow: 1;
}
.box2 {
background: rgb(30, 98, 138);
animation: flexanimation 1s ease-out 1s infinite alternate backwards;
}
@keyframes flexanimation {
100% {
flex-grow: 5;
}
}
</style>
</head>
<body>
<div class="containerbox">
<div class="box">Box 1</div>
<div class="box2">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html> Output:
Example No.2:
In this example, we are using flex property with CSS architecture. Flex is used as shorthand for flex-grow, flex-shrink, and flex-basis. It will tell the flex item to grow or shrink in order to fit in the available space in the flex container.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: flex;
background-color: rgb(53, 130, 175);
align-content: space-between;
height: 150px;
width: 600px;
flex-wrap: wrap;
}
.box > div {
background-color: rgb(156, 224, 221);
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
}
div {
animation: myanim 4s infinite;
}
@keyframes myanim {
50% {
flex: 1;
}
}
</style>
</head>
<body>
<h1>Let's Animate!</h1>
<div class = "box">
<div style = "order: 8">1</div>
<div style = "order: 6">2</div>
<div style = "order: 2">3</div>
<div style = "order: 1">4</div>
<div style = "order: 7">5</div>
<div style = "order: 4">6</div>
<div style = "order: 3">7</div>
<div style = "order: 5">8</div>
</div>
</body>
</html> Output:
CONCLUSION:
Animations are fun to use and implement in your web project. In advanced CSS, we can use flexbox for animation purposes. Flexbox container and Flexbox item properties are used in flex animation with keyframes and CSS techniques for creating flexbox animation.
