实例 居中对齐弹性对象元素内的某个项： #myBlueDiv{ align-self:center;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字...

实例 让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容： #main div{ flex:1;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在...

实例 使一个div元素逐渐移动200像素： @keyframes mymove{from {top:0px;}to {top:200px;}}@-webkit-keyframes mymove /* Safari and Chrome */{from {top:0px;}to {top:200px;}} 尝试一下 » 在此页底部有更多的例子。 浏览器...

实例 使用简写属性把 animation 绑定到一个div 元素： div{ animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第...

实例 为 @keyframes 动画指定一个名称：： animation-name:mymove;-webkit-animation-name:mymove; /* Safari 和 Chrome */ 尝试一下 » 浏览器支持 p表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟...

实例 设置动画在两秒内完成: animation-duration:2s;-webkit-animation-duration:2s; /* Safari 和 Chrome */ 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-,...

实例 从开始到结束以相同的速度播放动画: animation-timing-function:linear;-webkit-animation-timing-function:linear; /* Safari and Chrome */ 尝试一下 » 在此页底部有更多的例子。 浏览器支持 属性 animatio...

实例 等待两秒，然后开始动画： animation-delay:2s;-webkit-animation-delay:2s; /* Safari 和 Chrome */ 尝试一下 » 在此页底部有更多的例子。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器...

实例 播放三次动画： animation-iteration-count:3; -webkit-animation-iteration-count:3; /*Safari and Chrome*/ 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-...

实例 先执行一遍动画，然后再反向执行一遍动画： animation-direction:alternate;-webkit-animation-direction:alternate; /* Safari 和 Chrome */ 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个...