order animation

animate order property

by Lujia Zhai

HTML

<div id="container">
    <div class="o1">1</div>
    <div class="o2">2</div>
    <div class="o3">3</div>
    <div class="o4">4</div>
    <div class="o5">5</div>
    <div class="o6">6</div>
    <div class="o7">7</div>
    <div class="o8">8</div>
    <div class="o9">9</div>
    <div class="o10">10</div>
</div>

CSS

#container {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    padding:10px;
}
#container div {
    width: 50px;
    font:bold 14px/30px Arial;
    border:1px solid #CCC;
    text-align:center;
    margin-right:5px;
}
.o1 {
    order:1;
}
.o2 {
    order:2;
}
.o3 {
    order:3;
}
.o4{order:4;}
.o5{order:5;}
.o6{order:6;}
.o7{order:7;}
.o8{order:8}
.o9{order:9}
.o10{order:10}

.animated {
    -webkit-animation:move 5s linear 0s 1 alternate;
    animation:move 5s linear 0s 1 alternate;
}
@-webkit-keyframes move {
    from: {
        order:1;
    }
    to: {
        order:10;
    }
}

JavaScript

setTimeout(function () {
    document.getElementsByClassName('o1')[0].classList.add('animated');
}, 3000);