Animation makes a webpage more attractive and eye-catching. Animation and translation elements help to create a page that has a fine layout and is beautifully designed with moving elements. Animated elements engaged users by their movement until content loads.
Cascading Style Sheet CSS helps us to design our user interface. We use various CSS properties to style our page and make our layout more attractive and finer to use.
What is CSS Flexbox?
Flexbox is a flexible layout that helps to create a responsive webpage without position and float. Before Flexbox, we used four different layout properties to design a webpage, but Flexbox is an easier method to make a page responsive with multiple position properties.
Flexbox property is one of the CSS properties that help to format your HTML content. It helps to align content and items, create space, size the item, be responsive and put your item at fixed places and more item properties.
We use a flex container to create flex items inside it.
Flex item properties that are used to create item animation.
- flex
- flex-shrink
- flex-grow
- flex-basis
- align-self
- order
What is Animation in CSS?
Animation in CSS means Create Dynamic items without any external triggering such as using a hover or mouse to start moving objects. In transition, we use an external source to start the changes. Animation property created with help of CSS that creates automatic animation without JavaScript and jQuery that are used for translation.
CSS animation properties
- @keyframes
- animation
- animation-name
- animation-duration
- animation-delay
- animation-iteration-count
- animation-direction
- animation-timing-function
- animation-fill-mode
- animation-iteration-count
- animation-play-state
To animate the element, declare the changes and styling inside @keyframe that you want to apply to elements during a certain period. Keyframe store the styling and the phases on which you want to create changes and for certain times.
Flex Animation
- Create the animation with the @keyframe statement. Declare the position of element color, font size, etc. inside it. syntax
@keyframes test {
0% {top: 0px; left: 0px; background: red;}
50% {top: 200px; left: 1250px; background: blue }
100% {top: 0px; left: 0px; background: rgb(0, 140, 255);}
}
- Bind that element in a div that contains the name you assign, time duration, and how much time you want to animate your item. syntax
div{
animation: animation-name animation-time-duration animation-iteration-count;
}
- call it in HTML code by using the class name.
<div class="containerbox">
<div class="box">Box 1</div>
<div class="box2">Box 2</div>
<div class="box">Box</div>
</div>
- you can also create div in a container box without creating a child class.
<div class="containerbox">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
1. Flex property
The flex property is a flexbox property that adds grow, and shrink values of flex property, respectively. Using flex property inside keyframes.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 50px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
animation: test 5s infinite;
}
@keyframes test {
100% { flex: 1;}
}
</style>
</head>
<body>
<h1>Flex Animation</h1>
<div class="flex-container">
<div style="background-color: rgb(131, 243, 131);">1</div>
<div style="background-color: rgb(236, 83, 236);">2</div>
<div style="background-color: rgb(226, 25, 159);">3</div>
<div style="background-color: rgb(238, 108, 115);">4</div>
<div style="background-color: rgb(238, 241, 12);">5</div>
<div style="background-color: rgb(221, 161, 122);">6</div>
<div style="background-color: rgb(130, 196, 240);">7</div>
<div style="background-color: rgb(236, 69, 105);">8</div>
</div>
</body>
</html>
Output
2. The flex-grow property
It works on the growing property of a flex item related to other flex items. Its value should be a number.
<!DOCTYPE html>
<html>
<head>
<style>
.containerbox {
height: 95vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
.box {
background: rgb(60 0 0);
flex-grow: 1;
}
.box2 {
font-family: monospace;
color: white;
font-size: 35px;
text-align: center;
background: rgba(85, 4, 4, 0.829);
animation: flexanimation 1s cubic-bezier(0.76, 0.05, 0.58, 1) 1s infinite alternate backwards;
}
@keyframes flexanimation {
100% {
flex-grow: 5;
}
}
</style>
</head>
<body>
<div class="containerbox">
<div class="box"></div>
<div class="box2">Animation Created with Flex-grow Property</div>
<div class="box"></div>
</div>
</body>
</html>
Outout
3. Flex-shrink property
It works on the shrinking property of a flex item related to other flex items. Its value should be a number.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: rgb(28, 14, 107);
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 150px;
font-size: 30px;
width: 100px;
margin: 5px;
animation: test 3s infinite;
}
@keyframes test {
70% {
flex-shrink: 1;
}
}
</style>
</head>
<body>
<h1>Flex-shrink</h1>
<div class = "mycontainer">
<div style="background-color: rgb(131, 243, 131);">1</div>
<div style="background-color: rgb(236, 83, 236);">2</div>
<div style="background-color: rgb(226, 25, 159);">3</div>
<div style = "flex-shrink: 0">4</div>
<div style="background-color: rgb(238, 241, 12);">5</div>
<div style="background-color: rgb(221, 161, 122);">6</div>
<div style="background-color: rgb(130, 196, 240);">7</div>
<div style="background-color: rgb(236, 69, 105);">8</div>
<div style="background-color: rgb(238, 241, 12);">9</div>
<div style="background-color: rgb(221, 161, 122);">10</div>
</div>
</body>
</html>
Output
- flex-basis property The flex-basis property set out the length of starting flex item.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: flex;
background-color: rgb(17, 185, 190);
height: 100px;
}
.box > div {
background-color: white;
text-align: center;
line-height: 75px;
text-align: center;
font-size: 30px;
width: 100px;
margin: 5px;
}
div {
animation: test 3s infinite;
}
@keyframes test {
50% {
flex-basis: 100px;
} }
</style>
</head>
<body>
<h1>Flex-basis Animation</h1>
<div class = "box">
<div style="background-color: greenyellow">1</div>
<div style="background-color: goldenrod">2</div>
<div style="background-color: green">3</div>
<div style="background-color: red">4</div>
<div style = "flex-basis: 350px">5</div>
<div style="background-color: grey">6</div>
<div style="background-color: plum">7</div>
<div style="background-color: darkorchid;">8</div>
<div style="background-color: sandybrown">9</div>
<div style="background-color: brown">10</div>
</div>
</body>
</html>
Output
Conclusion
In this article, we animate the CSS flexbox by using different flex properties. Animation on a webpage makes it attractive. Flexbox is an advanced type of CSS that helps to create a responsive layout and format HTML with different properties align-content and items, space, size the item, etc. We use CSS flex container and flex item with @keyframes rule to create animation.
Top comments (0)