flex-shrink - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:flex-shrink

  1. HOME
  2. HTML CSS
  3. CSS Animatable Property
  4. flex-shrink

Introduction

In the following code the flex-shrink property of the flex item2 is animating from its initial value "1" to "2", and back to the initial value "1" again up to infinite times.

-webkit- prefix is for Chrome, Safari, Opera.

-moz- prefix is for Firefox.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 flex-shrink Property Animation</title>
  <style type="text/css">
.flex-container {<!--from ww  w  .  j av a  2  s.  c  om-->
  width: 300px;
  height: 200px;
  font-size: 32px;
  border: 1px solid black;
  display: -webkit-flex; /* Safari */
  display: flex; 
}
.flex-container div {
  -webkit-flex: 1 1 200px; /* Safari 6.1+ */
        -ms-flex: 1 1 200px; /* IE 10 */
            flex: 1 1 200px; 
}
.item1 {
  background: red;
}
.item2 {
  background: blue;
}
.item3 {
  background: yellow;
}
.animated {
    -webkit-animation: test 4s infinite; 
    animation: test 4s infinite;
}

@-webkit-keyframes test {
    50% {-webkit-flex-shrink: 2;}
}

@keyframes test {
    50% {flex-shrink: 2;}
}
</style>
 </head>
 <body>

  <p> </p>
  <div class="flex-container">
   <div class="item1">
    1
   </div>
   <div class="item2 animated">
    2
   </div>
   <div class="item3">
    3
   </div>
  </div>
 </body>
</html>

Related Tutorials