CSS动画
2020-11-21 本文已影响0人
小铮冲冲冲
在使用过渡达到动画效果时有很大局限性，因此我们可以使用css中的动画属性来满足我们的需求，首先需要创建一个关键帧：
@keyframes name{
from{}
to{}
}
from为动画的开始位置，同为动画的结束位置，动画与过渡的区别在于，动画可以自动触发。我们使用animation作为动画属性
- animation-dely 动画延迟
- animation-name 生效的关键帧名
- animation-duration 动画时间
- animation-iteration-count 动画重复次数（数字或者无穷infinite）
- animation-play-state 设置动画的执行状态（可通过hover设置移入播放或暂停）
- animation-fill-mode 填充模式（默认值为none，动画执行完后回到原来位置；forwards：结束后停到最后的位置；backwards：动画在延时等待时元素会在开始位置的时候就发生改变；both：结合fowards和backwards的功能）
-
animation-direction 指定动画的运行方向（默认值为normal：从from到to；reverse:从to到from；alternate：从from到to，重复则反向执行；alternate-reverse：从to到from，重复则反向执行）
以上是常用的几个属性名，由这些属性我们可以晚上上一章用过渡做的动画效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="content">
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="p4"></div>
</div>
</body>
</html>
.content{
width: 400px;
height: 400px;
background-color: #fff;
}
.p1{
width: 100px;
height: 100px;
background-color: antiquewhite;
margin-left: 0;
animation-name: name5;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.p2{
width: 100px;
height: 100px;
margin-top: 200px;
background-color: aliceblue;
animation-name: name2;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.p3{
width: 100px;
height: 100px;
background-color: coral;
margin-left: 300px;
margin-top: -400px;
animation-name: name3;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.p4{
width: 100px;
height: 100px;
background-color: darkorchid;
margin:200px 0 0 300px;
animation-name: name4;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes name5{
from{
margin-left: 0;
background-color: antiquewhite;}
to{
margin-left: 300px;
background-color: coral;
}
}
@keyframes name2{
from{
margin-top: 200px;
background-color: aliceblue;
}
to{
margin-top: -100px;
background-color: antiquewhite;
}
}
@keyframes name3{
from{
background-color: coral;
margin-left: 300px;
margin-top: -400px;
}
to{
margin-top: 200px;
background-color: darkorchid;
}
}
@keyframes name4{
from{
background-color: darkorchid;
margin:200px 0 0 300px;
}
to{
background-color: aliceblue;
margin: -100px 0 0 0;
}
}
run.png
.box1{
width: 112.25px;
height: 167px;
background-image: url(../img/run.png);
margin: 0 auto;
animation: run 0.01s infinite steps(4); */
}
@keyframes run{
from{
background-position:0 0 ;}
to{
background-position:-450px 0 ;
}
}
通过steps（）设置步长，缩短时间来达到小人奔跑的效果。
