Flex Animation

Animation makes a webpage more attractive and eye-catching. Animation and translation elements help create a page with a good layout and are beautifully designed with moving elements. Animated elements engaged users by their movement until …

Flex Animation

Animation makes a webpage more attractive and eye-catching. Animation and translation elements help create a page with a good layout and are 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 creating dynamic items without any external triggering, such as using a hover or mouse to move objects. In transition, we use an external source to start the changes. Animation property created with the help of CSS that makes automatic animation without JavaScript and jQuery that are used for translation.

CSS animation properties 

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

  1. 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);}
}

2. 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;
}

3. 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>

4. 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>

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>

4. 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>

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.

Suggested Read: Error: Expected primary expression before ‘enum’ C++

Categories CSS

Leave a Comment