css动画 反向 |骰子翻转css3怎么实现

反向动画顾名思义就是将动画倒过来执行，通常只需几行CSS代码就可以实现。下面是一个简单的例子：

.box {
width: 100px;
height: 100px;
background-color: red;
animation: move 2s ease-in-out alternate 1;
}
@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}

上述代码表示当大家将鼠标指针悬停在红色盒子上时，它会向右移动100像素，然后又移回原点。而如果大家将反向动画应用到这个动画中，就可以让盒子一开始就呈现在移动后的位置，然后往回移动到原点：

.box {
width: 100px;
height: 100px;
background-color: red;
transform: translateX(100px);
animation: move 2s ease-in-out alternate 1;
animation-direction: reverse;
}

在反向动画中，大家只需要添加一行CSS代码，即animation-direction: reverse;，就可以将动画倒过来执行。同时，大家也需要将原本的from和to换成相反的。

这样就实现了一个简单的反向动画。需要注意的是，如果大家在一个已经反向执行的动画中再次应用反向动画，那么动画会再次执行正向动画。这个时候，可以在CSS中使用animation-iteration-count属性来规定动画执行的次数，以避免这种情况的出现。