首页 | 简单教程,简单编程

提交运行

代码编辑器：

<!DOCTYPE html>
<meta charset="utf-8"><link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/>
<style>

#main {
  width: 400px;
  height: 150px;
  border: 1px solid #000000;
  display: flex;
}

#main div {
  width: 70px;
  height: 70px;
}

#myGreenDIV
{
	animation:mymove 5s infinite;
	/*Safari 和 Chrome:*/
	-webkit-animation:mymove 5s infinite;
}

@keyframes mymove
{
	50% {order:6;}
}

/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
	50% {order:6;}
}
</style>

<p>改变绿色 DIV 元素的顺序，从 1 到 6 再回到 1：<p>

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

代码编辑器：

运行结果：