47. CSS3 animation-name属性调用动画
animation-name
属性主要是用来调用 @keyframes
定义好的动画。需要特别注意: animation-name
调用的动画名需要和@keyframes
定义的动画名称完全一致(区分大小写),如果不一致将不具有任何动画效果。
语法:
animation-name: none | IDENT[,none|DENT]*;
- IDENT 是由
@keyframes
创建的动画名,上面已经讲过了(animation-name
调用的动画名需要和@keyframes
定义的动画名称完全一致); - none 为默认值,当值为 none 时,将没有任何动画效果,这可以用于覆盖任何动画。
注意:需要在 Chrome 和 Safari 上面的基础上加上-webkit-
前缀,Firefox 加上-moz-
。
实例演示
调用定义的动画“around”
HTML 代码:
<div><span></span></div>
CSS 代码:
@keyframes around{ 0% { transform: translateX(0); } 25%{ transform: translateX(180px); } 50%{ transform: translate(180px, 180px); } 75%{ transform:translate(0,180px); } 100%{ transform: translateY(0); } } div { width: 200px; height: 200px; border: 1px solid red; margin: 20px auto; } div span { display: inline-block; width: 20px; height: 20px; background: orange; border-radius: 100%; animation-name:around; animation-duration: 10s; animation-timing-function: ease; animation-delay: 1s; animation-iteration-count:infinite; }
效果如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 47. CSS3 animation-name属性调用动画
码云笔记 » 47. CSS3 animation-name属性调用动画