animation-name
animation-name规定 @keyframes 动画的名称。
语法
animation-name: none; animation-name: identifier;
值
值 | 描述 |
---|---|
none | 特殊关键字,表示无关键帧。 |
identifier | 动画名称。名称必须符合CSS语法中标识的定义。 |
例子
HTML
<div class="stage"> <figure class="ball"></figure> </div>
CSS
@keyframes 'slide' { from { left: 0; top: 0; } 50% { left: 244px; top: 100px; } to { left: 488px; top: 0; } } .stage { height: 150px; position: relative; min-width: 500px; } .stage .ball { animation-name: slide;//与keyframes定义的名称保持一致 animation-duration:2s; animation-timing-function: ease-in-out; animation-delay: 1.5s; animation-iteration-count: infinite; animation-direction: alternate; } .ball { background: red; border-radius: 50%; height: 50px; position: absolute; width: 50px; }
执行结果