时间:2021-05-08
animation-name 动画名称,可以有多个值,用逗号隔开,表示绑定了多个动画
animation-name属性为动画指定一个名称
animation-name兼容主流的浏览器,不过还是需要加前缀去兼容
animation-name有两个属性值,分别是keyframename和none
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style> body{ margin:0 auto; background:#abcdef; } div{ width:800px; height:800px; margin:0 auto; } .container{ position: relative; } .inner, .middle, .outer, .pic{ position: absolute; top:0; right:0; bottom:0; left:0; margin:auto; } .inner{ background:url(source/circle_inner.jpg) center no-repeat; animation-name:circle_inner; } .middle{ background:url(source/circle_middle.jpg) center no-repeat; animation-name:circle_middle; } .outer{ background:url(source/circle_outer.jpg) center no-repeat; animation-name:circle_outer; } .pic{ background:url(source/pic.jpg) center no-repeat; }</style></head><body> <div class="container"> <div class="inner"></div> <div class="middle"></div> <div class="outer"></div> <div class="pic"></div> </div></body></html>animation-duration 动画持续时间 默认是0
animation-timing-function 动画时间函数
animation-delay 动画延迟时间
animation-delay 属性定义动画什么时候开始,单位可以是秒(s)或毫秒(ms),允许负值,-2s使动画马上开始,但会跳过2s进入动画
animation-iteration-count 动画循环次数
animation-iteration-count: number | infinite 默认为1
animation-direction: normal | reverse | alternate | alternate-reverse 正常; 反向; 正反交替; 反正交替
alternate 和 alternate-reverse ,如果animation-itreation-count 不是设置成 infinite ,则只会执行一次就停止
animation-fill-mode 动画延迟未执行时,或者动画执行完毕后的停留状态(动画不能设置为循环,否则无法停止)
animation-fill-mode: none | forwards | backwards | both 无 结束状态 开始状态 看情况
animation-play-state: running | paused 动画运行状态:运行 | 暂停
animation 简写
animation: name duration timing-function delay iteration-count direction fill-mode play-state
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style> body{ margin:0 auto; background:#abcdef; } div{ width:800px; height:800px; margin:0 auto; } .container{ position: relative; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; -o-transform-style:preserve-3d; transform-style:preserve-3d; } .inner, .middle, .outer, .pic{ position: absolute; top:0; right:0; bottom:0; left:0; margin:auto; } .container:hover div{ -webkit-animation-play-state:paused; -moz-animation-play-state:paused; -ms-animation-play-state:paused; -o-animation-play-state:paused; animation-play-state:paused; } .inner{ background:url(source/circle_inner.jpg) center no-repeat; -webkit-animation:circle_inner 10s ease-in-out 1s infinite alternate running; -moz-animation:circle_inner 10s ease-in-out 1s infinite alternate running; -ms-animation:circle_inner 10s ease-in-out 1s infinite alternate running; -o-animation:circle_inner 10s ease-in-out 1s infinite alternate running; animation:circle_inner 10s ease-in-out 1s infinite alternate running; } .middle{ background:url(source/circle_middle.jpg) center no-repeat; -webkit-animation:circle_middle 10s ease-in-out 1s infinite alternate running; -moz-animation:circle_middle 10s ease-in-out 1s infinite alternate running; -ms-animation:circle_middle 10s ease-in-out 1s infinite alternate running; -o-animation:circle_middle 10s ease-in-out 1s infinite alternate running; animation:circle_middle 10s ease-in-out 1s infinite alternate running; } .outer{ background:url(source/circle_outer.jpg) center no-repeat; -webkit-animation:circle_outer 10s ease-in-out 1s infinite alternate running; -moz-animation:circle_outer 10s ease-in-out 1s infinite alternate running; -ms-animation:circle_outer 10s ease-in-out 1s infinite alternate running; -o-animation:circle_outer 10s ease-in-out 1s infinite alternate running; animation:circle_outer 10s ease-in-out 1s infinite alternate running; } .pic{ background:url(source/pic.jpg) center no-repeat; } @keyframes circle_inner{ 0%{ transform:rotateX(0deg); } 50%{ transform:rotateX(90deg); } 100%{ transform:rotateX(360deg); } } @keyframes circle_middle{ 0%{ transform:rotateY(0deg); } 50%{ transform:rotateY(90deg); } 100%{ transform:rotateY(360deg); } } @keyframes circle_outer{ 0%{ transform:rotateZ(0deg); } 50%{ transform:rotateZ(90deg); } 100%{ transform:rotateZ(360deg); } }</style></head><body> <div class="container"> <div class="inner"></div> <div class="middle"></div> <div class="outer"></div> <div class="pic"></div> </div></body></html>动画性能优化:
用position-fixed代替background-attachment
带图片的元素放在伪元素中
will-change
兼容性IE13+ 感觉可以放弃了……
向下提示箭头效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style> body{ margin:0 auto; background:#abcdef; } div{ width:30px; height:30px; position: fixed; left:0; right:0; bottom:100px; margin:0 auto; cursor:pointer; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); -webkit-animation:upDown 2s ease-in-out infinite; -moz-animation:upDown 2s ease-in-out infinite; -ms-animation:upDown 2s ease-in-out infinite; -o-animation:upDown 2s ease-in-out infinite; animation:upDown 2s ease-in-out infinite; } @-webkit-keyframes upDown{ 0%{ bottom:100px; } 50%{ bottom:80px; } 100%{ bottom:100px; } } @-moz-keyframes upDown{ 0%{ bottom:100px; } 50%{ bottom:80px; } 100%{ bottom:100px; } } @-ms-keyframes upDown{ 0%{ bottom:100px; } 50%{ bottom:80px; } 100%{ bottom:100px; } } @-o-keyframes upDown{ 0%{ bottom:100px; } 50%{ bottom:80px; } 100%{ bottom:100px; } } @keyframes upDown{ 0%{ bottom:100px; } 50%{ bottom:80px; } 100%{ bottom:100px; } }</style></head><body> <div>></div></body></html>总结
以上所述是小编给大家介绍的css3使用animation属性实现炫酷效果,希望对大家有所帮助!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在学习css3的过程中,发现很多看着炫酷的效果,利用css3的属性能很简单的实现,animation是css3动画效果中常见的属性。下面让我们了解一下如何利用这
SpinKit是一套网页动画效果,包含8种基于CSS3实现的很炫的加载动画。借助CSS3Animation的强大功能来创建平滑,易于定制的动画。SpinKit的
用css3动画实现的一个简单炫酷效果,最终的效果图如下:页面结构(index.html):DocumentRelaxAndBreathscript.js:con
本文实例为大家分享了CSS实现横向粒子变动加载动画的对应代码,供大家参考,具体内容如下此处用到了CSS3动画animation属性的animation-fill
通过css3实现炫酷的雷达扫描图:直接上代码://index.html雷达扫描图//index.css*{box-sizing:border-box;}html