如何在css3中使用animation属性
这篇文章给大家介绍如何在css3中使用animation属性,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
animation-name 动画名称,可以有多个值,用逗号隔开,表示绑定了多个动画
animation-name属性为动画指定一个名称
animation-name兼容主流的浏览器,不过还是需要加前缀去兼容
animation-name有两个属性值,分别是keyframename和none
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Document</title> <style> body{ margin:0auto; background:#abcdef; } div{ width:800px; height:800px; margin:0auto; } .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)centerno-repeat; animation-name:circle_inner; } .middle{ background:url(source/circle_middle.jpg)centerno-repeat; animation-name:circle_middle; } .outer{ background:url(source/circle_outer.jpg)centerno-repeat; animation-name:circle_outer; } .pic{ background:url(source/pic.jpg)centerno-repeat; } </style> </head> <body> <divclass="container"> <divclass="inner"></div> <divclass="middle"></div> <divclass="outer"></div> <divclass="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
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Document</title> <style> body{ margin:0auto; background:#abcdef; } div{ width:800px; height:800px; margin:0auto; } .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:hoverdiv{ -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)centerno-repeat; /*循环*/ -webkit-animation:circle_inner10sease-in-out1sinfinitealternaterunning; -moz-animation:circle_inner10sease-in-out1sinfinitealternaterunning; -ms-animation:circle_inner10sease-in-out1sinfinitealternaterunning; -o-animation:circle_inner10sease-in-out1sinfinitealternaterunning; animation:circle_inner10sease-in-out1sinfinitealternaterunning; /*不循环,填充效果*/ /*-webkit-animation:circle_inner10sease-in-out1sforwardsrunning; -moz-animation:circle_inner10sease-in-out1sforwardsrunning; -ms-animation:circle_inner10sease-in-out1sforwardsrunning; -o-animation:circle_inner10sease-in-out1sforwardsrunning; animation:circle_inner10sease-in-out1sforwardsrunning;*/ } .middle{ background:url(source/circle_middle.jpg)centerno-repeat; -webkit-animation:circle_middle10sease-in-out1sinfinitealternaterunning; -moz-animation:circle_middle10sease-in-out1sinfinitealternaterunning; -ms-animation:circle_middle10sease-in-out1sinfinitealternaterunning; -o-animation:circle_middle10sease-in-out1sinfinitealternaterunning; animation:circle_middle10sease-in-out1sinfinitealternaterunning; } .outer{ background:url(source/circle_outer.jpg)centerno-repeat; -webkit-animation:circle_outer10sease-in-out1sinfinitealternaterunning; -moz-animation:circle_outer10sease-in-out1sinfinitealternaterunning; -ms-animation:circle_outer10sease-in-out1sinfinitealternaterunning; -o-animation:circle_outer10sease-in-out1sinfinitealternaterunning; animation:circle_outer10sease-in-out1sinfinitealternaterunning; } .pic{ background:url(source/pic.jpg)centerno-repeat; } @keyframescircle_inner{ 0%{transform:rotateX(0deg);} 50%{transform:rotateX(90deg);} 100%{transform:rotateX(360deg);} } @keyframescircle_middle{ 0%{transform:rotateY(0deg);} 50%{transform:rotateY(90deg);} 100%{transform:rotateY(360deg);} } @keyframescircle_outer{ 0%{transform:rotateZ(0deg);} 50%{transform:rotateZ(90deg);} 100%{transform:rotateZ(360deg);} } </style> </head> <body> <divclass="container"> <divclass="inner"></div> <divclass="middle"></div> <divclass="outer"></div> <divclass="pic"></div> </div> </body> </html>
动画性能优化:
用position-fixed代替background-attachment
带图片的元素放在伪元素中
will-change
兼容性IE13+ 感觉可以放弃了……
向下提示箭头效果
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Document</title> <style> body{ margin:0auto; background:#abcdef; } div{ width:30px; height:30px; position:fixed; left:0; right:0; bottom:100px; margin:0auto; cursor:pointer; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); -webkit-animation:upDown2sease-in-outinfinite; -moz-animation:upDown2sease-in-outinfinite; -ms-animation:upDown2sease-in-outinfinite; -o-animation:upDown2sease-in-outinfinite; animation:upDown2sease-in-outinfinite; } @-webkit-keyframesupDown{ 0%{bottom:100px;} 50%{bottom:80px;} 100%{bottom:100px;} } @-moz-keyframesupDown{ 0%{bottom:100px;} 50%{bottom:80px;} 100%{bottom:100px;} } @-ms-keyframesupDown{ 0%{bottom:100px;} 50%{bottom:80px;} 100%{bottom:100px;} } @-o-keyframesupDown{ 0%{bottom:100px;} 50%{bottom:80px;} 100%{bottom:100px;} } @keyframesupDown{ 0%{bottom:100px;} 50%{bottom:80px;} 100%{bottom:100px;} } </style> </head> <body> <div>></div> </body> </html>
关于如何在css3中使用animation属性就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。