css动画 返回 |怎么用css做个星星

通过CSS的animationend事件，大家可以捕获到CSS动画结束的事件，然后执行大家需要的操作。比如:

.element {
animation: myAnimation 1s;
}
.element.animated {
animation: myAnimation 1s;
}
.element.animated::after {
content: "动画结束";
}
.element.animated {
animation: myAnimation 1s;
animation-fill-mode: forwards;
}
.element.animated::after {
content: "动画结束";
}
.element {
animation: myAnimation 1s;
transition: transform 0.5s ease;
}
.element:hover {
transform: scale(1.2);
}
.element:hover::after {
content: "动画结束";
}
var el = document.getElementById("myElement");
el.addEventListener("animationend", function() {
console.log("动画结束");
});

上面的代码演示了三种不同的方式来实现CSS动画返回，包括:

• 使用animation-fill-mode: forwards，保留动画最后一帧状态
• 使用伪元素::after来显示动画结束的提示信息
• 通过JavaScript代码捕获动画结束的事件，执行后续操作

总之，通过使用CSS动画返回技术，大家可以更加灵活地控制动画效果，并且实现更加丰富的交互体验。