@keyframes 属性——动画示例

Html5知典

发布于 2019-11-26 15:15:54

6790

发布于 2019-11-26 15:15:54

文章被收录于专栏：Html5知典Html5知典

用途

@keyframes 动画可以根据帧定制不同的动画效果

语法

@keyframes <identifier> {
     [ [ from | to | <百分比> ] [, from | to | <百分比> ]* block ]* 
 }

值

值	描述
identifier	帧列表的名称。名称必须符合 CSS 语法中对标识符的定义。
from	起始时间，等效0%。
to	结束时间，等效100%。
<percentage>	动画序列中，触发关键帧的时间点，使用百分值来表示。

例子

/* HTML */
<div class="stage"> 
    <figure class="ball"></figure> 
</div>
    
/* CSS */
@keyframes 'slide' { 
    0% { 
        left: 100px; 
        } 
    40% { 
        left: 150px; 
        } 
    60% { 
        left: 75px; 
        } 
    100% { 
        left: 100px; 
        } 
} 
.stage { 
    height: 50px; 
    position: relative; 
    min-width: 538px; } 
.stage .ball { 
    animation-name: slide; 
    animation-duration: 2s; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; } 
.ball { 
    background: #2db34a; 
    border-radius: 50%; 
    height: 50px; 
    position: absolute; 
    width: 50px; }

执行结果