animation 动画
简写语法: animation: animation-name duration timing-function delay iteration -count direction
属性:
animation-name
被调用的关键帧名称
animation-timing-function
动画的速度曲线
属性值:
linear
动画从头到尾的速度是相同
ease
默认。动画以低速开始,然后加快,在结束前变慢
ease-in
动画以低速开始
ease-out
动画以低速结束
cubic-bezier(n,n,n,n)
在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
animation –delay
延迟 s/ms
animation-iteration-count
动画应该播放的次数
属性值:
infinite
无限次播放
omal
设置播放次数
animation-direction
规定是否该轮流反向播放动画
属性值:
normal
alternate
动画应该轮流反向播放
reverse
动画反向播放
alternate-reverse
动画在奇数次(1、3、5…)反向播放,在偶数次(2、4、6…)正向播放
animation-play-state
暂停/运行
属性值:
paused 暂停
running 运行
animation-fill-mode
规定动画在播放之前或者之后,其动画效果是否可见
属性值:
none
不改变,默认
forwards
当动画完成后保持最后一个属性值
backwards
在animation –delay指定的一段时间之内,在动画显示之前,应用开始属性值。
both
向前和向后填充模式都被应用。
@keyframes:
语法:@keyframes animation-name {keyframes-selector {css-styles;}}
animation-name
被调用的关键帧名称
是必需的,用来定义animation的名称。
keyframes-selector
必需的,动画持续时间的百分比
合法值:
0-100%
from (和0%相同)
to (和100%相同)
注: 可以用一个动画keyframes-selectors。
例如:
@keyframes move
{
0% {left:0px;}
25% {left:-200px;}
50% {left:100px;}
75% {left:200px;}
100% {left:10px;}
}
css-styles
必需的,可使用一个或多个合法的CSS样式属性
跑动示例:
素材图
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跑步</title>
<style>
body,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,select,textarea,button,th,td,blockquote,address,pre{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,input,textarea,select,button,label{font-size:100%;vertical-align:middle;}
ul,dl,ol{list-style:none;}
img,fieldset{border:none;}
img{display:inline-block;overflow:hidden;vertical-align:top;}
em,address{font-style:normal;}
sup,sub{vertical-align:baseline;}
table{border-collapse:collapse;border-spacing:0;}
q:before{content:"";}
q:after{content:"";}
button{cursor:pointer;}
textarea{word-wrap:break-word;resize:none;}
/* 正式样式文件 */
.charector-wrap {
position: relative;
width: 180px;
height: 300px;
border:1px solid red;
left: 50%;
margin-left: -90px;
}
.charector {
position: absolute;
width: 180px;
height: 300px;
background: url(charector.png) 0 0 no-repeat;
animation-name: move;
animation-duration: 950ms;
animation-iteration-count: infinite;
animation-timing-function: step-start; /*马上跳转到动画每一帧结束的状态*/
}
@keyframes move {
0% {
background-position: 0 0;
}
14% {
background-position: -180px 0;
}
28% {
background-position: -360px 0;
}
42% {
background-position: -540px 0;
}
56% {
background-position: -720px 0;
}
70% {
background-position: -900px 0;
}
84% {
background-position: -1080px 0;
}
100% {
background-position: 0 0;
}
}
</style>
</head>
<body>
<div class="charector-wrap">
<div class="charector"></div>
</div>
</body>
</html>