菜鸟教程 trycss_anim_order 在线代码实例

运行 保存 全屏 右侧展示 实时查看
主题:

 <p>改变绿色 DIV 元素的顺序,从 1 到 6 再回到 1:</p><p>

</p><div id="main">
  <div style="background-color:lightgreen;order:1;" id="myGreenDIV"></div>
  <div style="background-color:coral;order:2;"></div>
  <div style="background-color:lightblue;order:3;"></div>
  <div style="background-color:pink;order:4;"></div>
</div>

<p>在 CSS 中,order 属性是 <em>可动画化(animatable)</em> 的。</p>

<p><strong>注意:</strong>Chrome 不支持动画的 order 属性。</p>
<p>Internet Explorer 10、Firefox 和 Opera 支持 CSS 动画。</p>
<p>Safari 和 Chrome 通过带有前缀 -webkit-,支持 CSS 动画。</p>