| 属性 |
实例 |
| background |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
background: red url("/examples/smiley.gif") no-repeat top left/5px 5px;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
background: blue bottom right/50px 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
background: blue bottom right/50px 50px;
}
}
</style>
</head>
<body>
<p>逐步改变背景属性:
<p>
<div id="myDIV"></div>
<p>background 属性是所有背景属性的简写属性。</p>
<p>CSS 中仅有 background-color, background-position, 和 background-size 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| background-color |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
background: red url("/examples/smiley.gif") no-repeat top left/5px 5px;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
background: blue bottom right/50px 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
background: blue bottom right/50px 50px;
}
}
</style>
</head>
<body>
<p>逐步改变背景属性:
<p>
<div id="myDIV"></div>
<p>background 属性是所有背景属性的简写属性。</p>
<p>CSS 中仅有 background-color, background-position, 和 background-size 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
<style>
#myDIV {
width: 300px;
height: 200px;
background: red;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
background-color: blue;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
background-color: blue;
}
}
</style>
</head>
<body>
<p>逐步改变背景颜色属性（红-蓝-黑-红）:
<p>
<div id="myDIV"></div>
<p>background-color 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| background-position |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
background-image: url("/examples/smiley.gif");
background-position: top left;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
background-position: center;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
background-position: center;
}
}
</style>
</head>
<body>
<p>逐步改变 background-position 属性，从 "top left" 到 "center",然后回到 "top left":
<p>
<div id="myDIV"></div>
<p>background-position 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| background-size |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
background-image: url("/examples/smiley.gif");
background-size: 20px 20px;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
background-size: 125px 125px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
background-size: 125px 125px;
}
}
</style>
</head>
<body>
<p>逐步改变 background-size 属性，从 "10px 10px" 到 "125px 125px",然后回到 "10px 10px":
<p>
<div id="myDIV"></div>
<p>background-size 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| border |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
border: 15px solid lightblue;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
border: 15px solid lightblue;
}
}
</style>
</head>
<body>
<p>逐步改变 border 属性:
<p>
<div id="myDIV"></div>
<p>border 属性是所有边框属性的简写。</p>
<p>可以通过单独的边框属性来查看动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| border-bottom |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
border-bottom: 15px solid lightblue;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
border-bottom: 15px solid lightblue;
}
}
</style>
</head>
<body>
<p>逐步改变 border-bottom 属性:
<p>
<div id="myDIV"></div>
<p>border-bottom 属性是所有底部边框属性的简写。</p>
<p>查看单独边框 border-bottom 属性的动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| border-bottom-color |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
border: 15px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
border-bottom-color: lightblue;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
border-bottom-color: lightblue;
}
}
</style>
</head>
<body>
<p>逐步改变 border-bottom-color 属性(黑-蓝-黑):
<p>
<div id="myDIV"></div>
<p>border-bottom-color 支持动画。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| border-bottom-left-radius |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
border-bottom-left-radius: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
border-bottom-left-radius: 50px;
}
}
</style>
</head>
<body>
<p>逐步改变 border-bottom-left-radius 属性（从 0 到 50px）:
<p>
<div id="myDIV"></div>
<p> border-bottom-left-radius 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| border-bottom-right-radius |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
border-bottom-right-radius: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
border-bottom-right-radius: 50px;
}
}
</style>
</head>
<body>
<p>逐步改变 border-bottom-right-radius 属性（从 0 到 50px）:
<p>
<div id="myDIV"></div>
<p>border-bottom-right-radius 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| border-bottom-width |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
border-bottom-width: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
border-bottom-width: 50px;
}
}
</style>
</head>
<body>
<p>逐步改变 border-bottom-width 属性（从 0 到 50px）:
<p>
<div id="myDIV"></div>
<p>border-bottom-width 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| border-color |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
border: 15px solid coral;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
border-color: lightblue;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
border-color: lightblue;
}
}
</style>
</head>
<body>
<p>逐步改变 border-color 属性从珊瑚色到青蓝色:
<p>
<div id="myDIV"></div>
<p>border-color 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| border-left |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
border-left: 15px solid lightblue;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
border-left: 15px solid lightblue;
}
}
</style>
</head>
<body>
<p>逐步改变 border-left 属性:
<p>
<div id="myDIV"></div>
<p>border-left 是所有左边框属性的简写。</p>
<p>可以使用独立的 border-left 的各个属性来查看动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| border-left-color |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
border: 15px solid coral;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
border-left-color: lightblue;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
border-left-color: lightblue;
}
}
</style>
</head>
<body>
<p>逐步改变 border-left-color 属性从珊瑚色到青蓝色:
<p>
<div id="myDIV"></div>
<p>border-left-color 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| border-left-width |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
border-left-width: 15px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
border-left-width: 15px;
}
}
</style>
</head>
<body>
<p>逐步改变 border-left-width 属性从 1px 到 15px:
<p>
<div id="myDIV"></div>
<p>border-left-width 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| border-right |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
border-right: 15px solid lightblue;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
border-right: 15px solid lightblue;
}
}
</style>
</head>
<body>
<p>逐步改变 border-right 属性:
<p>
<div id="myDIV"></div>
<p>border-right 是所有右边框属性的简写。</p>
<p>可以使用独立的 border-right 的各个属性来查看动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| border-right-color |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
border: 15px solid coral;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
border-right-color: lightblue;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
border-right-color: lightblue;
}
}
</style>
</head>
<body>
<p>逐步改变 border-right-color 属性从珊瑚色到青蓝色:
<p>
<div id="myDIV"></div>
<p>border-right-color 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| border-right-width |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
border-right-width: 15px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
border-right-width: 15px;
}
}
</style>
</head>
<body>
<p>逐步改变 border-right-width 属性，从 1px 到 15px:
<p>
<div id="myDIV"></div>
<p>border-right-width 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| border-spacing |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table,
th,
td {
border: 1px solid black;
}
#myTABLE {
border-spacing: 2px;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
border-spacing: 20px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
border-spacing: 20px;
}
}
</style>
</head>
<body>
<p>逐步改变 border-spacing 属性从 2px 到 20px:
<p>
<table id="myTABLE">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Emil</td>
<td>9</td>
</tr>
<tr>
<td>Tobias</td>
<td>7</td>
</tr>
<tr>
<td>Linus</td>
<td>2</td>
</tr>
</table>
<p>border-spacing 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| border-top |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
border-top: 15px solid lightblue;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
border-top: 15px solid lightblue;
}
}
</style>
</head>
<body>
<p>逐步改变 border-top 属性:
<p>
<div id="myDIV"></div>
<p>border-top 是所有顶部边框属性的简写。</p>
<p>可以使用独立的 border-top 的各个属性来查看动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| border-top-color |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
border: 15px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
border-top-color: lightblue;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
border-top-color: lightblue;
}
}
</style>
</head>
<body>
<p>逐步改变 border-top-color 属性从珊瑚色到青蓝色:
<p>
<div id="myDIV"></div>
<p>border-top-color 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| border-top-left-radius |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
border-top-left-radius: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
border-top-left-radius: 50px;
}
}
</style>
</head>
<body>
<p>逐步改变 border-right-color 属性从 0 到 50px:
<p>
<div id="myDIV"></div>
<p>border-top-left-radius 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| border-top-right-radius |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
border-top-right-radius: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
border-top-right-radius: 50px;
}
}
</style>
</head>
<body>
<p>逐步改变 border-top-right-radius 属性从 0 到 50px:
<p>
<div id="myDIV"></div>
<p>border-top-right-radius 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| border-top-width |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
border-top-width: 15px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
border-top-width: 15px;
}
}
</style>
</head>
<body>
<p>逐步改变 border-top-width 属性从 1px 到 15px:
<p>
<div id="myDIV"></div>
<p>border-top-width 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| bottom |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
position: absolute;
width: 100px;
height: 100px;
background-color: coral;
color: white;
bottom: 0px;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
bottom: 300px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
bottom: 300px;
}
}
</style>
</head>
<body>
<p>逐步改变 bottom 属性从 0px 到 300px:
<p>
<div id="myDIV">
<h1>myDIV</h1>
</div>
<p>bottom 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| box-shadow |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 100px;
height: 100px;
background-color: coral;
color: white;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
box-shadow: 10px 20px 30px blue;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
box-shadow: 10px 20px 30px blue;
}
}
</style>
</head>
<body>
<p>逐步改变 box-shadow 属性:
<p>
<div id="myDIV">
<h1>myDIV</h1>
</div>
<p>box-shadow 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| clip |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 100px;
height: 100px;
background-color: coral;
color: white;
position: absolute;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
clip: rect(0px, 50px, 50px, 0px);
}
}
/* Standard syntax */
@keyframes mymove {
50% {
clip: rect(0px, 50px, 50px, 0px);
}
}
</style>
</head>
<body>
<p>clip 属性支持动画效果, 但确无法达到预期效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
<div id="myDIV">
<h1>myDIV</h1>
</div>
</body>
</html>
尝试一下 »
| color |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
border: 1px solid black;
width: 300px;
color: red;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
color: blue;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
color: blue;
}
}
</style>
</head>
<body>
<p>逐步改变字体颜色，从红到蓝：
<p>
<div id="myDIV">
<h1>这是标题</h1>
<p>这是段落</p>
</div>
<p>color 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| column-count |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
border: 1px solid black;
width: 500px;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
-webkit-column-count: 5;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
column-count: 5;
}
}
</style>
</head>
<body>
<p>逐步改变列数，从 1 到 5：
<p>
<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
<p>column-count 属性支持动画效果。</p>
<p><b>注意：</b>Firefox不支持 column-count 属性。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| column-gap |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
border: 1px solid black;
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
-webkit-column-gap: 100px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
column-gap: 100px;
}
}
</style>
</head>
<body>
<p>逐步改变列的间隔，从普通到 100px：
<p>
<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
<p>column-gap 属性支持动画效果。</p>
<p><b>注意：</b>Firefox 不支持 column-gap 属性。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| column-rule |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
border: 1px solid black;
/* Firefox */
-moz-column-count: 3;
-moz-column-rule: 1px outset red;
/* Chrome, Safari, Opera */
-webkit-column-rule: 1px outset red;
-webkit-column-count: 3;
-webkit-animation: mymove 5s infinite;
/* Standard syntax */
column-count: 3;
column-rule: 1px outset red;
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
-webkit-column-rule: 50px outset blue;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
-moz-column-rule: 50px outset blue;
/* Firefox */
column-rule: 50px outset blue;
}
}
</style>
</head>
<body>
<p>column-rule 属性是所有列规则属性的简写：</p>
<p>column-rule-color 和 column-rule-width 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
<p>逐步改变列间的规则:
<p>
<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</body>
</html>
尝试一下 »
| column-rule-color |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
border: 1px solid black;
/* Firefox */
-moz-column-count: 3;
-moz-column-rule: 15px outset red;
/* Chrome, Safari, Opera */
-webkit-column-rule: 15px outset red;
-webkit-column-count: 3;
-webkit-animation: mymove 5s infinite;
/* Standard syntax */
column-count: 3;
column-rule: 15pxpx outset red;
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
-webkit-column-rule-color: blue;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
-moz-column-rule-color: blue;
/* Firefox */
column-rule-color: blue;
}
}
</style>
</head>
<body>
<p>column-rule-color 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
<p>逐步改变列之间的颜色规则，从红到蓝:
<p>
<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</body>
</html>
尝试一下 »
| column-rule-width |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
border: 1px solid black;
/* Firefox */
-moz-column-count: 3;
-moz-column-rule: 1px outset red;
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-rule: 1px outset red;
-webkit-animation: mymove 5s infinite;
/* Standard syntax */
column-count: 3;
column-rule: 1pxpx outset red;
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
-webkit-column-rule-width: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
-moz-column-rule-width: 50px;
/* Firefox */
column-rule-width: 50px;
}
}
</style>
</head>
<body>
<p>column-rule-width 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
<p>逐步改变列的宽度，从 1px 到 50px:
<p>
<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</body>
</html>
尝试一下 »
| column-width |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
border: 1px solid black;
/* Firefox */
-moz-column-width: 300px;
/* Chrome, Safari, Opera */
-webkit-column-width: 300px;
-webkit-animation: mymove 5s infinite;
/* Standard syntax */
column-width: 300px;
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
-webkit-column-width: 100px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
-moz-column-width: 100px;
/* Firefox */
column-width: 100px;
}
}
</style>
</head>
<body>
<p>column-width 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
<p>逐步改变列间的宽度，从 300px 到 100px:
<p>
<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</body>
</html>
尝试一下 »
| columns |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
-webkit-columns: 100px 5;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
-moz-columns: 100px 5;
/* Firefox */
columns: 100px 5;
}
}
</style>
</head>
<body>
<p>columns 属性是设置 column-count 和 column-width 属性的简写。</p>
<p>column-count 和 column-width 属性支持动画效果。</p>
<p><b>注意：</b> Firefox 浏览器支持该属性。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
<p>逐步改变 columns 属性:
<p>
<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</body>
</html>
尝试一下 »
| filter |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img {
-webkit-animation: mymove 7s infinite;
/* Chrome, Safari, Opera */
animation: mymove 7s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
}
/* Standard syntax */
@keyframes mymove {
50% {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
}
</style>
</head>
<body>
<p>逐步改变图片的背景颜色，从黑到白 (100% 灰阶):
<p>
<img src="/examples/pineapple.jpg" alt="Pineapple" width="300" height="300">
<p>filter 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| flex |
|
| flex-basis |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
#myBlueDiv {
animation: mymove 5s infinite;
/*Safari 和 Chrome:*/
-webkit-animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
flex-basis: 200px;
}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove {
50% {
flex-basis: 200px;
}
}
</style>
</head>
<body>
<p>"蓝色 DIV" 的 flex-basis 属性逐渐地从 40px 变化到 200px，然后再变回来：
<p>
<div id="main">
<div style="background-color:coral;">红色 DIV</div>
<div style="background-color:lightblue;" id="myBlueDiv">蓝色 DIV</div>
</div>
<p>在 CSS 中，flex-basis 属性是 <em>可动画化（animatable）</em> 的。</p>
<p>Internet Explorer 10、Firefox 和 Opera 支持 CSS 动画。</p>
<p>Safari 和 Chrome 通过带有前缀 -webkit-，支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| flex-grow |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div:nth-of-type(1) {
flex-grow: 1;
}
#main div:nth-of-type(2) {
flex-grow: 1;
}
#main div:nth-of-type(3) {
flex-grow: 1;
}
#myBlueDiv {
animation: mymove 5s infinite;
/*Safari 和 Chrome:*/
-webkit-animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
flex-grow: 8;
}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove {
50% {
flex-grow: 8;
}
}
</style>
</head>
<body>
<p>"blue DIV" 的 flex-grow 属性逐渐地从 1 变化到 8，然后再变回 1：
<p>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;" id="myBlueDiv"></div>
<div style="background-color:khaki;"></div>
</div>
<p>在 CSS 中，flex-grow 属性是 <em>可动画化（animatable）</em> 的。</p>
<p>Internet Explorer 10、Firefox 和 Opera 支持 CSS 动画。</p>
<p>Safari 和 Chrome 通过带有前缀 -webkit-，支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| flex-shrink |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 300px;
}
#myBlueDiv {
animation: mymove 5s infinite;
/*Safari 和 Chrome:*/
-webkit-animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
flex-shrink: 8;
}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove {
50% {
flex-shrink: 8;
}
}
</style>
</head>
<body>
<p>"blue DIV" 的 flex-shrink 属性逐渐地从 1 变化到 8，然后再变回 1：
<p>
<div id="main">
<div style="background-color:coral;">红色 DIV</div>
<div style="background-color:lightblue;" id="myBlueDiv">蓝色 DIV</div>
</div>
<p>在 CSS 中，flex-shrink 属性是 <em>可动画化（animatable）</em> 的。</p>
<p>Internet Explorer 10、Firefox 和 Opera 支持 CSS 动画。</p>
<p>Safari 和 Chrome 通过带有前缀 -webkit-，支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| font |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
border: 1px solid black;
width: 400px;
height: 100px;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
font: 40px bold;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
font: 40px bold;
}
}
</style>
</head>
<body>
<p>逐步改变 font 属性:
<p>
<div id="myDIV">
<p>这是一个段落</p>
</div>
<p>font 属性是所有字体属性的简写。</p>
<p>font-size, font-weight, font-stretch, 和 line-height 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| font-size |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
border: 1px solid black;
width: 400px;
height: 100px;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
font-size: 40px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
font-size: 40px;
}
}
</style>
</head>
<body>
<p>逐步改变文本的 font-size 属性:
<p>
<div id="myDIV">
<p>这是一个段落</p>
</div>
<p>font-size 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| font-size-adjust |
|
| font-stretch |
|
| font-weight |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
border: 1px solid black;
width: 400px;
height: 100px;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
font-weight: bold;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
font-weight: bold;
}
}
</style>
</head>
<body>
<p>逐步改变 font-weight 属性，从普通到加粗:
<p>
<div id="myDIV">
<p>这是一个段落</p>
</div>
<p>font-weight 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| height |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
height: 100px;
background-color: coral;
color: white;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
height: 500px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
height: 500px;
}
}
</style>
</head>
<body>
<p>height 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
<p>逐步改变 DIV 元素的高度，从 100px 到 500px:
<p>
<div id="myDIV">
<h1>My DIV</h1>
</div>
</body>
</html>
尝试一下 »
| left |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: coral;
color: white;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
left: 500px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
left: 500px;
}
}
</style>
</head>
<body>
<p>left 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
<p>逐步改变 DIV 的左边定位，从 0 到 500px:
<p>
<div id="myDIV">
<h1>My DIV</h1>
</div>
</body>
</html>
尝试一下 »
| letter-spacing |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
letter-spacing: 2px;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
letter-spacing: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
letter-spacing: 50px;
}
}
</style>
</head>
<body>
<p>letter-spacing 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
<p>逐步改变 DIV 元素的 letter-spacing 属性从 2px 到 50px:
<p>
<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</body>
</html>
尝试一下 »
| line-height |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
line-height: 16px;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
line-height: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
line-height: 50px;
}
}
</style>
</head>
<body>
<p>line-height 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
<p>逐步改变 DIV 元素的 line-height 属性从 16px 到 50px:
<p>
<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</body>
</html>
尝试一下 »
| margin |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
height: 200px;
background-color: lightblue;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
margin: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
margin: 50px;
}
}
</style>
</head>
<body>
<p>逐步改变 margin 属性，从 0px 到 50px:
<p>
<div id="myDIV">
This is my DIV element.
</div>
<p>margin 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| margin-bottom |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
height: 200px;
background-color: lightblue;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
margin-bottom: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
margin-bottom: 50px;
}
}
</style>
</head>
<body>
<p>逐步改变 margin-bottom, 从 0px 到 50px :
<p>
<div id="myDIV">
This is my DIV element.
</div>
<p>margin-bottom 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| margin-left |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
height: 200px;
background-color: lightblue;
border: 1px solid black;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
margin-left: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
margin-left: 50px;
}
}
</style>
</head>
<body>
<p>逐步改变 margin-left, 从 0px 到 50px :
<p>
<div id="myDIV">
This is my DIV element.
</div>
<p>margin-left 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| margin-right |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
height: 200px;
background-color: lightblue;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
margin-right: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
margin-right: 50px;
}
}
</style>
</head>
<body>
<p>逐步改变 margin-right, 从 50px 到 0px :
<p>
<div id="myDIV">
This is my DIV element.
</div>
<p>margin-right 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| margin-top |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
height: 200px;
background-color: lightblue;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
margin-top: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
margin-top: 50px;
}
}
</style>
</head>
<body>
<p>逐步改变 margin-top, 从 0px 到 50px :
<p>
<div id="myDIV">
This is my DIV element.
</div>
<p>margin-top 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| max-height |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 500px;
background-color: lightblue;
overflow: auto;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
max-height: 100px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
max-height: 100px;
}
}
</style>
</head>
<body>
<p>逐步改变 max-height, 从 "none" 到 "100px":
<p>
<div id="myDIV">
<p>This DIV element does not have a pre-defined height.</p>
<p>An animation will change the max-height, from "none" to "100px".</p>
<p>The height of this DIV element will not exceed 100 pixels.</p>
</div>
<p>max-height 属性支持动画效果。</p>
<p><b>注意:</b> 目前 max-height 属性在 Chrome 浏览器下不会改变 <em>gradually（灰阶）</em>, 在 Firefox 都无法起作用。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| max-width |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
background-color: lightblue;
overflow: auto;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
max-width: 600px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
max-width: 600px;
}
}
</style>
</head>
<body>
<p>逐步改变 max-width, 从 "none" 到 "600px":
<p>
<div id="myDIV">
<p>This DIV element does not have a pre-defined width.</p>
<p>Try resizing the browser window to see that width of this DIV element will grow/shrink along width the resizing, but it will never exceed 600 pixels in width.</p>
</div>
<p>max-width 属性支持动画效果。</p>
<p><b>注意:</b> 目前 max-height 属性在 Chrome 浏览器下不会改变 <em>gradually（灰阶）</em>, 在 Firefox 都无法起作用。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| min-height |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 500px;
background-color: lightblue;
overflow: auto;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
min-height: 400px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
min-height: 400px;
}
}
</style>
</head>
<body>
<p>逐步改变 max-height, 从 "none" 到 "400px":
<p>
<div id="myDIV">
<p>This DIV element does not have a pre-defined height.</p>
<p>An animation will change the min-height, from "none" to "400px".</p>
</div>
<p>min-height 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| min-width |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 50%;
background-color: lightblue;
overflow: auto;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
min-width: 800px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
min-width: 800px;
}
}
</style>
</head>
<body>
<p>逐步改变 max-width, 从 "none" 到 "800px":
<p>
<p><strong>注意:</strong> min-width 属性会覆盖 width 属性。</p>
<div id="myDIV">
<p>This DIV element has a pre-defined width: 50%.</p>
<p>An animation will gradually change the min-width to 800 pixels.</p>
</div>
<p>min-width 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| opacity |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
position: absolute;
top: 180px;
width: 300px;
height: 150px;
background-color: lightblue;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
#DIV2 {
position: absolute;
top: 160px;
left: 30px;
width: 300px;
height: 150px;
background-color: coral;
border: 1px solid black;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
opacity: 0;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<p>opacity 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
<p>逐步改变蓝色 DIV 元素的透明度 从 1 到 0:
<p>
<div id="DIV2">
<h1>Voila!</h1>
</div>
<div id="myDIV">
</div>
</body>
</html>
尝试一下 »
| order |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
</head>
<body>
<p>改变绿色 DIV 元素的顺序，从 1 到 6 再回到 1：
<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>
</body>
</html>
尝试一下 »
| outline |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
outline: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
outline: 15px solid lightblue;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
outline: 15px solid lightblue;
}
}
</style>
</head>
<body>
<p>逐步改变 outline 属性:
<p>
<div id="myDIV"></div>
<p>outline 属性是所有轮廓样式的简写。</p>
<p>可以通过单独的轮廓属性来查看动画效果。 </p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| outline-color |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 300px;
height: 200px;
outline: 15px solid red;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
outline-color: blue;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
outline-color: blue;
}
}
</style>
</head>
<body>
<p>逐步改变 outline-color 属性，从红到蓝：
<p>
<div id="myDIV"></div>
<p>outline-color 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| outline-offset |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
margin: auto;
border: 1px solid black;
outline: coral solid 5px;
width: 300px;
height: 300px;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
outline-offset: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
outline-offset: 50px;
}
}
</style>
</head>
<body>
<p>逐步改变 outline-color 属性，从 0 到 50px：
<p>
<div id="myDIV"></div>
<p>outline-offset 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| outline-width |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
margin: auto;
border: 1px solid black;
outline: coral solid 5px;
width: 300px;
height: 300px;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
outline-width: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
outline-width: 50px;
}
}
</style>
</head>
<body>
<p>逐步改变 outline-width 属性，从 5px 到 50px：
<p>
<div id="myDIV"></div>
<p>outline-width 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| padding |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
background-color: lightblue;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
padding: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
padding: 50px;
}
}
</style>
</head>
<body>
<p>逐步改变 padding 属性，从 0px 到 50px:
<p>
<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
<p>padding 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| padding-bottom |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
background-color: lightblue;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
padding-bottom: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
padding-bottom: 50px;
}
}
</style>
</head>
<body>
<p>逐步改变 padding-bottom, 从 0px 到 50px:
<p>
<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
<p>padding-bottom 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| padding-left |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
background-color: lightblue;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
padding-left: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
padding-left: 50px;
}
}
</style>
</head>
<body>
<p>逐步改变 padding-left 属性，从 0px 到 50px:
<p>
<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
<p>padding-left 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| padding-right |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
background-color: lightblue;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
padding-right: 150px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
padding-right: 150px;
}
}
</style>
</head>
<body>
<p>逐步改变 padding-right 属性，从 0px 到 150px:
<p>
<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
<p>padding-right 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| padding-top |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
background-color: lightblue;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
padding-top: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
padding-top: 50px;
}
}
</style>
</head>
<body>
<p>逐步改变 padding-top 属性，从 0px 到 50px:
<p>
<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
<p>padding-top 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| perspective |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#div1 {
position: relative;
margin: auto;
height: 150px;
width: 250px;
padding: 10px;
border: 1px solid black;
/* Chrome, Safari, Opera */
-webkit-perspective: 200px;
-webkit-animation: mymove 5s infinite;
/* Standard syntax */
animation: mymove 5s infinite;
perspective: 200px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
-webkit-perspective: 100px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
perspective: 100px;
}
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
-webkit-transform: rotateX(45deg);
/* Chrome, Safari, Opera */
transform: rotateX(45deg);
}
</style>
</head>
<body>
<p>perspective 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
<div id="div1">DIV1
<div id="div2">Think that you are looking down on a wall. See what happens when you gradually change the perspective!</div>
</div>
</body>
</html>
尝试一下 »
| perspective-origin |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#div1 {
position: relative;
margin: auto;
height: 150px;
width: 250px;
padding: 10px;
border: 1px solid black;
/* Chrome, Safari, Opera */
-webkit-perspective: 125px;
-webkit-animation: mymove 5s infinite;
/* Standard syntax */
perspective: 125px;
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
-webkit-perspective-origin: 10px 50%;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
perspective-origin: 10px 50%;
}
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: coral;
-webkit-transform: rotateX(45deg);
/* Chrome, Safari, Opera */
transform: rotateX(45deg);
}
</style>
</head>
<body>
<p>perspective-origin 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
<div id="div1">DIV1
<div id="div2">Think that you are looking down on a wall. See what happens when you gradually change the perspective!</div>
</div>
</body>
</html>
尝试一下 »
| right |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
position: absolute;
right: 0;
width: 100px;
height: 100px;
background-color: coral;
color: white;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
right: 500px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
right: 500px;
}
}
</style>
</head>
<body>
<p>right 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
<p>逐步改变 DIV 元素的右边的位置，从 0 到 500px:
<p>
<div id="myDIV">
<h1>My DIV</h1>
</div>
</body>
</html>
尝试一下 »
| text-decoration-color |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
text-decoration: underline;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
-moz-text-decoration-color: red;
}
}
</style>
</head>
<body>
<p>逐渐地把下划线的颜色从黑色变为红色，再从红色变回黑色：
<p>
<div id="myDIV">
<p>这是一个段落。</p>
</div>
<p>在 CSS 中，text-decoration-color 属性是 <em>可动画化（animatable）</em> 的。</p>
<p><b>注意：</b>几乎所有的主流浏览器都不支持 text-decoration-color 属性。</p>
<p><b>注意：</b>Firefox 支持另一个可替代该属性的属性，即 -moz-text-decoration-color 属性。</p>
<p>Internet Explorer 10、Firefox 和 Opera 支持 CSS 动画。</p>
<p>Safari 和 Chrome 通过带有前缀 -webkit-，支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| text-indent |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
background-color: lightblue;
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
text-indent: 150px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
text-indent: 150px;
}
}
</style>
</head>
<body>
<p>逐步改变 text-indent 属性，从 0px 到 150px:
<p>
<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
<p>text-indent 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| text-shadow |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
text-shadow: 10px 20px 30px blue;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
text-shadow: 10px 20px 30px blue;
}
}
</style>
</head>
<body>
<p>text-shadow 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
<p>逐步改变 text-shadow 属性:
<p>
<div id="myDIV">
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</div>
</body>
</html>
尝试一下 »
| top |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
position: absolute;
width: 100px;
height: 100px;
background-color: coral;
color: white;
top: 0;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
top: 300px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
top: 300px;
}
}
</style>
</head>
<body>
<p>逐步改变 padding-right 属性，从 0px 到 300px:
<p>
<div id="myDIV">
<h1>myDIV</h1>
</div>
<p>top 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| transform |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
margin: auto;
border: 1px solid black;
width: 200px;
height: 100px;
background-color: coral;
color: white;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
-webkit-transform: rotate(180deg);
}
}
/* Standard syntax */
@keyframes mymove {
50% {
transform: rotate(180deg);
}
}
</style>
</head>
<body>
<p>DIV 元素的旋转 180 度:
<p>
<div id="myDIV">
<h1>myDIV</h1>
</div>
<p>transform 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| transform-origin |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#DIV1 {
height: 200px;
width: 200px;
margin: auto;
border: 1px solid black;
}
#DIV2 {
width: 150px;
height: 150px;
border: 1px solid black;
background-color: coral;
-ms-transform: rotate(45deg);
/* IE 9 */
/* Chrome, Safari, Opera */
-webkit-transform: rotate(45deg);
-webkit-animation: mymove 5s infinite;
/* Standard syntax */
transform: rotate(45deg);
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
-webkit-transform-origin: 0 0 0;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
transform-origin: 0 0 0;
}
}
#DIV2original {
position: absolute;
width: 150px;
height: 150px;
border: 1px dashed grey;
background-color: lightgrey;
opacity: 0.5;
}
</style>
</head>
<body>
<p>逐步改变 transform-origin 从 "50% 50% 0" 到 "0 0 0":
<p>
<p><b>注意：</b>灰色 DIV 元素的 DIV2 元素不会旋转。</p>
<div id="DIV1">DIV1
<div id="DIV2original">DIV2</div>
<div id="DIV2">DIV2</div>
</div>
<p>transform-origin 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| vertical-align |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myIMG {
vertical-align: 50px;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
vertical-align: 100px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
vertical-align: 100px;
}
}
</style>
</head>
<body>
<p>逐步改变 Image 元素的 vertical-align 属性，从 0 到 100px:
<p>
<p><img id="myIMG" src="/examples/smiley.gif" width="32" height="32"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</p>
<p>vertical-align 属性支持动画效果。</p>
<p><b>注意：</b>Chrome 浏览器不支持 vertical-align 属性。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
</body>
</html>
尝试一下 »
| visibility |
|
| width |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 120px;
background-color: coral;
color: white;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
width: 500px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
width: 500px;
}
}
</style>
</head>
<body>
<p> width 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
<p>逐步改变 DIV 元素的宽度，从 120px 到 500px:
<p>
<div id="myDIV">
<h1>My DIV</h1>
</div>
</body>
</html>
尝试一下 »
| word-spacing |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
border: 1px solid black;
-webkit-animation: mymove 5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
word-spacing: 50px;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
word-spacing: 50px;
}
}
</style>
</head>
<body>
<p>word-spacing 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
<p>逐步改变 DIV 元素的 word-spacing 属性 从 "normal" 到 "50px":
<p>
<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</body>
</html>
尝试一下 »
| z-index |
尝试一下 》 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
position: absolute;
}
#container div {
background-color: lightblue;
border: 1px solid #333333;
width: 100px;
height: 100px;
opacity: 0.5;
}
div#myBox {
opacity: 1;
background-color: coral;
z-index: 1;
-webkit-animation: mymove 5s infinite linear;
/* Chrome, Safari, Opera */
animation: mymove 5s infinite linear;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
z-index: 5;
}
}
/* Standard syntax */
@keyframes mymove {
50% {
z-index: 5;
}
}
</style>
</head>
<body style="position:absolute">
<p>z-index 属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>
<p>逐步改变 "myBox" 的 z-index 属性 从 1 到 5:
<p>
<div id="container">
<div id="myBox">myBox</div>
<div style="top:20px;left:20px;z-index:1;">z-index 1</div>
<div style="top:40px;left:40px;z-index:2;">z-index 2</div>
<div style="top:60px;left:60px;z-index:3;">z-index 3</div>
<div style="top:80px;left:80px;z-index:4;">z-index 4</div>
</div>
</body>
</html>
尝试一下 »