关于both的疑问？怎么让both对象状态为动画开始时的状态？
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width:100px;
height:100px;
background:#555;
}
.box{
animation:ani 1s linear 1s backwards;
}
.box1{
animation:ani 1s linear 1s forwards;
}
.box2{
animation:ani 1s linear 1s both;
}
@keyframes ani{
0%{
-webkit-transform:translateX(-50PX);
}
50%{
-webkit-transform:translateX(0);
}
100%{
-webkit-transform:translateX(500px);
}
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------
如何理解both：设置对象状态为动画结束或开始的状态。这句话？为什么第三个元素both运行完会和forwards是一样的，那怎么让both跟backwards一样呢？感谢老师！
正在回答 回答被采纳积分+1
animation-fill-mode属性：设置动画在开始前和结束后的样式，有以下4个属性值。
[1] none（默认值）：不设置样式。
[2] forwards：动画结束后的样式是最后一帧的样式。
[3] backwards：动画开始前的样式是第一帧的样式。
[4] both：相当于forwards+ backwards，即动画开始前的样式是第一帧的样式，动画结束后的样式是最后一帧的样式。
测试代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" manifest="cache.manifest">
<head>
<title>2-23-animation-fill-mode</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
div
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 500px;
height: 500px;
background-image: linear-gradient(45deg, blue 25%, transparent 25% 75%, blue 75%),
linear-gradient(135deg, red 25%, transparent 25% 75%, blue 75%);
animation-name: rotate;
animation-duration: 2s;
animation-delay: 1s;
animation-timing-function: linear;
animation-fill-mode: both;
}
@keyframes rotate
{
from
{
transform: rotate(45deg);
}
to
{
transform: rotate(225deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星