日期:2014-05-17  浏览次数:20618 次

使用CSS3生成简单的属性动画

使用CSS3动画/过渡,transition-duration和transition-property,transition-timing-function风格。

<!DOCTYPE html>
<html>
<head>
    <title>Creating simple property animations using CSS3</title>
    <style type="text/css">
        a {
            color: #F00;
            font-size: 4em;
            font-weight: bold;
            -webkit-transition-property: color;
            -webkit-transition-duration: 1s;
            -webkit-transition-timing-function: ease;
        }
        a:hover {
            color: #0F0;
        }
        a:active {
            color: #00F;
        }
    </style>
</head>
<body>
 
    <a id="header">-webkit-transition</a>
 
</body>
</html>

?源码下载:

?使用CSS3生成简单的属性动画.zip