order - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:order

  1. HOME
  2. HTML CSS
  3. CSS Animatable Property
  4. order

Introduction

In the following code the order of the flex item1 inside the following flex container is animating from its initial value "1" to "5", 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 order Property Animation</title>
  <style type="text/css">
.flex-container {<!--from   ww  w . ja va 2  s. c om-->
  width: 300px;
  height: 200px;
  font-size: 32px;
  border: 1px solid black;
  display: -webkit-flex; /* Safari */
  display: flex; 
}
.flex-container div {
  width: 100px;
}
.item1 {
  background: #e84d51;
  -webkit-order: 1;
  order: 1;
}
.item2 {
  background: #7ed636;
  -webkit-order: 2;
  order: 2;
}
.item3 {
  background: #2f97ff;
  -webkit-order: 3;
  order: 3;
}
.animated {
    -webkit-animation: test 4s infinite; 
    animation: test 4s infinite;
}

@-webkit-keyframes test {
    50% {-webkit-order: 5;}
}

@keyframes test {
    50% {order: 5;}
}
</style>
 </head>
 <body>
  <p> </p>
  <div class="flex-container">
   <div class="item1 animated">
    1
   </div>
   <div class="item2">
    2
   </div>
   <div class="item3">
    3
   </div>
  </div>
 </body>
</html>

Related Tutorials