关于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，即动画开始前的样式是第一帧的样式，动画结束后的样式是最后一帧的样式。
测试代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!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积分~
来为老师/同学的回答评分吧