CSS3 @keyframes 规则

来源：互联网发布：薛之谦女装店淘宝店编辑：程序博客网时间：2024/05/17 19:19

CSS3 @keyframes 规则的语法是：

@keyframes animationname {keyframes-selector {css-styles;}}

animationname：定义动画的名称。

keyframes-selector：动画时长的百分比。具有一个合法值：0-100%：0％是开头动画，100％是当动画完成。

from（与 0% 相同）、to（与 100% 相同）。

css-styles：一个或多个合法的 CSS 样式属性。

目前浏览器都不支持 @keyframes 规则。Firefox 兼容需要加-moz-： @-moz-keyframes 规则。

在动画元素中加入animation:run-right10s linear infinite;

@keyframes run-right {
100%{
transform: rotateY(-360deg);/*向左旋转360度*/

} }

完整的一个css变换例子：

<!DOCTYPE html>
<html>
<head>
   <meta name="" content="" charset="utf-8"/>
   <title>css样式变换</title>
<style>
   div
       {
           width:50px;
           height:50px;
           background:red;

animation:mymove 5s infinite;/*应用的动画样式，时间*/

}

         @keyframes mymove
           {
               0%   {top:0px; background:red; width:10px;}
               100% {top:200px; background:blue; width:600px;}
           }

</style>
</head>
<body>

       <p>本例在 Internet Explorer 中无效。</p>

       <div></div>

</body>
</html>

0 0