[CSS]-11-动画效果
引言
"动画效果"是css3新增加的功能,利用它能够完成很多令人惊艳的动态效果。
文章目录
0×1.百分比动画
请看下面的实例:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>百分比动画实例</title> <style type="text/css"> #d1{ width: 250px; height: 50px; text-align: center; line-height: 50px; <!--导入这个动画,divanimation是自定义的动画名称--> animation-name: divanimation; <!--整个动画加载时间--> animation-duration: 10s; <!--为了让大家在加载完成本页面后能够看到后面的动画效果,下面这条语句的意思是,重复播放,如果只想播放几次后停止,可以使用具体数字替换infinite值--> animation-iteration-count:infinite; } <!--整个动画流程,可以使用百分比细分每一个动作,这些动作将在调用它的标签所设定的时间内执行完成--> @keyframes divanimation{ 0%{ margin-left: 5px; border:5px dotted yellow; background-color: purple; } 30%{ margin-left: 15px; border:5px dashed pink; background-color: blue; } 50%{ margin-left: 25px; border:5px double red; background-color: white; color: black; } 70%{ margin-left: 35px; border:5px solid orange; background-color: gray; color: gold; } 100%{ border:5px solid white; background-color: green; color: white; } } </style> </head> <body> <div id="d1"> www.qingsword.com </div> </body> </html>
显示效果:
www.qingsword.com
0×2.起点与终点动画
百分比动画能够细分每个片段的效果,而"起点与终点动画"相当于,仅存在一个0%与100%的百分比动画,请看下面的实例:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>起点终点动画实例</title> <style type="text/css"> #d1{ width: 250px; height: 50px; text-align: center; line-height: 50px; animation-name: divanimation; animation-duration: 5s; animation-iteration-count:infinite; } @keyframes divanimation{ from{ <!--起点--> margin-left: 5px; border:5px dotted yellow; background-color: purple; } to{ <!--终点--> margin-left: 40px; border:5px double white; background-color: green; color: white; } } </style> </head> <body> <div id="d1"> www.qingsword.com </div> </body> </html>
显示效果:
www.qingsword.com
0×3.缓动速度与延迟
"缓动速度"与前面一篇文章中的"过度速率"的概念是一样的,并且他们也具有相同的速度值,请看下面的实例:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>缓动速度与延迟动画实例</title> <style type="text/css"> #d1{ width: 250px; height: 50px; text-align: center; line-height: 50px; border:2px solid gold; animation-name: divanimation; animation-duration: 5s; animation-iteration-count:infinite; <!--设置div的移动速度由慢到快--> animation-timing-function: ease-in; <!--设置延迟十秒后再开始执行动画效果,因为上面设置了重复播放,而延迟只是在页面刚加载时执行一次,所以大家看到这里的时候,动画已经开始执行并且循环了很多次了,如果想看到这个延迟效果,请刷新后在10秒内定位到下面的显示区--> animation-delay: 10s; } @keyframes divanimation{ from{ margin-left: 5px; border:5px dotted yellow; background-color: purple; } to{ margin-left: 40px; border:5px double white; background-color: green; color: white; } } </style> </head> <body> <div id="d1"> www.qingsword.com </div> </body> </html>
显示效果:
www.qingsword.com
0×4.重复播放与交替
重复播放上面已经演示过了,下面来演示一下交替播放设置,我们看到上面的播放模式都是动画到达100%后直接返回0%,但如果设置了交替属性,那么到达100%后将从100%处往回播放直至0%,就像倒带功能一样,请看下面的实例:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>交替动画实例</title> <style type="text/css"> #d1{ width: 250px; height: 50px; text-align: center; line-height: 50px; animation-name: divanimation; animation-duration: 5s; animation-iteration-count:infinite; <!--设置交替播放属性--> animation-direction: alternate; } @keyframes divanimation{ 0%{ margin-left: 5px; border:5px dotted yellow; background-color: purple; } 30%{ margin-left: 15px; border:5px dashed pink; background-color: blue; } 50%{ margin-left: 25px; border:5px double red; background-color: white; color: black; } 70%{ margin-left: 35px; border:5px solid orange; background-color: gray; color: gold; } 100%{ margin-left: 40px; border:5px solid white; background-color: green; color: white; } } </style> </head> <body> <div id="d1"> www.qingsword.com </div> </body> </html>
显示效果:
www.qingsword.com
0×5.停止播放
如果我们想停止某个动画的播放,除了注释动画调用属性外,还可以在调用标签中插入"animation-play-state: paused;",这样刷新页面后,这个标签将不会加载任何动画,默认情况下,动画停止在起始位置(animation-fill-mode:backforwards;),但如果我们想让动画停止在结束位置,可以将animation-fill-mode属性值设置成forwards,请看下面的实例:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>动画停止实例</title> <style type="text/css"> #d1{ width: 250px; height: 50px; text-align: center; line-height: 50px; border:2px solid gold; animation-name: divanimation; animation-duration: 5s; animation-delay: 10s; <!--动画播放完成后,将停止在结束位置,大家可以刷新后定位到下面的显示区查看这个属性的效果--> animation-fill-mode:forwards; } @keyframes divanimation{ from{ margin-left: 5px; border:5px dotted yellow; background-color: purple; } to{ margin-left: 40px; border:5px double white; background-color: green; color: white; } } </style> </head> <body> <div id="d1"> www.qingsword.com </div> </body> </html>
显示效果:
www.qingsword.com
0×6.animation简写模式
上面所有的animation子属性,都能一次性卸载animation属性中,下面是完整格式:
animation: 动画名称 动画执行秒数 缓动速度 执行次数 是否交替缓动 延迟秒数 停留位置;
下面用一个实例来演示一下简写模式:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>动画综合实例</title> <style type="text/css"> #d1{ width: 250px; height: 50px; text-align: center; line-height: 50px; border:2px solid gold; <!--如果设置了重复播放,可以将最后的"停留位置"这一参数设置成both,或者直接省略不写,另外如果不需要交替,可以使用normal代替--> animation: divanimation 5s ease infinite normal 0s both; <!--如果使用下面这句配置替换上面这句,那么就是循环3次,并且交替缓动,因为是交替缓动并且配置了动画停止后不返回起始点,最后div会停留在结束点--> <!--animation: divanimation 5s ease 3 alternate 0s forwards;--> } @keyframes divanimation{ from{ margin-left: 5px; border:5px dotted yellow; background-color: purple; } to{ margin-left: 40px; border:5px double white; background-color: green; color: white; } } </style> </head> <body> <div id="d1"> www.qingsword.com </div> </body> </html>
显示效果:
www.qingsword.com
Ps:因为浏览器兼容性的问题,部分火狐浏览器无法识别特殊的边框属性,IE低版本浏览器目前还无法支持动画效果(2016年),请使用谷歌浏览器浏览本页查看完整效果。