详解css3系列：动画@keyframes和Animation

来源：互联网发布：mac怎么软件下载编辑：程序博客网时间：2024/05/17 09:04

在css3中，我们可以通过`@keyframes`创建关键帧动画效果。我们需要将`@keyframes`绑定到选择器中，否则不会有效果出现。同时，我们还需定义动画时长和动画名称

语法

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

值描述animationname必需。定义动画的名称。keyframes-selector必需。动画时长的百分比。

在css3中，我们以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。其中，0% 是动画的开始时间，100% 动画的结束时间。

animation

另外一个重要的属性：animation

animation 属性是一个简写属性，用于设置六个动画属性：

animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

duration（持续的时间）

语法：

animation: name duration timing-function delay iteration-count direction;

值描述animation-name规定需要绑定到选择器的 keyframe 名称。animation-duration规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function规定动画的速度曲线。animation-delay规定在动画开始之前的延迟。animation-iteration-count规定动画应该播放的次数。animation-direction规定是否应该轮流反向播放动画。

animation-name属性主要是用来调用@keyframes定义好的动画。

注:animation-name调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。

语法

animation-direction: normal|alternate;

值描述normal默认值。动画应该正常播放。alternate动画应该轮流反向播放。

animation-timing-function 值:

代码例子

    <style type="text/css">         @keyframes changeColor{        0%{            background: #675AB3;        }        20%{            background:#C1E8FF;        }        40%{            background:#A48992;        }        60%{            background:#FFF900;        }        80%{            background:#6D87A0;        }        100%{            background: #FFB89A;        }    }        div {        width: 400px;        height: 150px;        background: #E7F0EF;        color:black;        margin: 50px auto;    }        div:hover {            animation: changeColor 6s ease-in-out   .2s;    }    </style> </head> <body>    <div>鼠标移动到我这里，查看动画效果</div> </body>

0 0

详解css3系列：动画@keyframes和Animation

在css3中，我们可以通过@keyframes创建关键帧动画效果。我们需要将@keyframes绑定到选择器中，否则不会有效果出现。同时，我们还需定义动画时长和动画名称

语法

animation

代码例子

在css3中，我们可以通过`@keyframes`创建关键帧动画效果。我们需要将`@keyframes`绑定到选择器中，否则不会有效果出现。同时，我们还需定义动画时长和动画名称