WEB前端第十七课——CSS动画
作者:互联网
1.animation动画
transition属性只能简单模拟动画效果,而animation属性可以制作类似Flash动画
通过关键帧控制动画的每一步,使元素从一中样式变为另一种样式,实现复杂的动画效果
2.@keyframes,用于声明动画,指定关键帧
帧,用于分解动画动作,每一帧代表某个时间点
书写格式:
@keyframes name(自定义名称){
from | 0% { CSS样式 }
percent | n% { CSS样式 }
to | 100% { CSS样式 }
}
3.animation属性,用于调用及控制由@keyframes定义的动画
简写属性书写格式:animation:name duration timing-function delay iteration-count direction
animation-name,设置需要调用的@keyframes动画的名称
animation-duration,播放动画持续的时间周期,时间单位 s/ms
animation-timing-function,设置动画播放的时间曲线,属性值与 transition-timing-function相同,包括 linear、ease、ease-in、ease-out、ease-in-out等
animation-delay,设置动画何时开始(延迟时间)
animation-iteration-count,设置动画播放的次数,属性值:n(数值,默认为1)、infinite(无限次/永远)
animation-direction,设置循环交替时反向播放动画,
属性值:normal(正常播放,默认)、reverse(反向播放)、alternate(奇数次正向播放、偶数次反向播放)、alternate-reverse(奇数次反向播放、偶数次正向播放)
animation-fill-mode,规定当动画未播放时(播放完或开始前)应用到元素的样式,
属性值:none(无样式,默认)、forwards(在动画结束后(由animation-iteration-count决定)应用该属性值)、
backwards(应用在animation-delay定义期间启动动画的第一次迭代的关键帧中定义的属性值)
both(同时遵循forwards和backwards 的规则)
animation-play-state,运行或暂停动画,属性值:paused(暂停)、running(运行,默认)
4.轮播图测试代码
<html> <head> <meta charset="utf-8"> <title>CSS_animation</title> <style> .cont{ width: 600px; height: 600px; background-color: #e5e5e5; margin: 50px auto; background-image: url("images/number/one.jpg"); background-repeat: no-repeat; background-position: center; -webkit-animation: rot 8s ease-in 1s 3 alternate forwards; } @-webkit-keyframes rot { 0%{ background-image: url("images/number/one.jpg"); } 25%{ background-image: url("images/number/two.jpg"); } 50%{ background-image: url("images/number/three.jpg"); } 75%{ background-image: url("images/number/four.jpg"); } 100%{ background-image: url("images/number/five.jpg"); } } </style> </head> <body> <div class="cont"> </div> </body> </html>
5.border绘制三角形、梯形
<html> <head> <meta charset="utf-8"> <title>CSS_graph</title> <style> .cont{ width: 0px; /* width=0时,三角形;width>0时,梯形;其他三个方向设置同理 ’*/ /*height: 100px;*/ background-color: transparent; margin: 100px auto; /*border-top: 120px solid red;*/ border-right: 120px solid transparent; border-bottom: 120px solid green; border-left: 120px solid transparent; } </style> </head> <body> <div class="cont"> </div> </body> </html>
标签:WEB,动画,第十七,animation,background,播放,CSS,属性 来源: https://www.cnblogs.com/husa/p/13434973.html