如何使用关键帧在CSS中设置动画

Question

我有个问题。我的菜单应该"幻灯片"；从左到右，所以我写了一些CSS:

.animate-in {
animation-name: menue-in;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.animate-out {
animation-name: menue-out;
animation-duration: 1s; 
animation-fill-mode: forwards;
}
@keyframes menue-in {
from { transform: translateX(-100%);}
to { transform: translateX(0%);}
}
@keyframes menue-out {
from { transform: translateX(0%);}
to { transform: translateX(-100%);}
}

被称为"关键帧"的关键帧；菜单中的"；将菜单从左向右移动效果很好，但我的关键帧"；菜单输出"；没有。。。

有人能帮帮我吗？

这是我的JS代码。。。

"use strict";
document.addEventListener("DOMContentLoaded", function() {
let toggle = document.getElementsByClassName("toggle")[0];
let navigation = document.getElementsByClassName("navigation__mobile")[0];
let showing = false;
toggle.addEventListener("click", function() {
navigation.classList.toggle("d-flex");
if(showing == false) {
navigation.classList.remove("animate-out");
navigation.classList.add("animate-in");
showing = true;
}
else {
navigation.classList.remove("animate-in");
navigation.classList.add("animate-out");
showing = false;
}
})
})

Answer 1

您似乎在寻找animation-fill-mode: forwards;以在最后一帧停止动画。

以下是您的案例片段
尽情享受。：(

"use strict";
document.addEventListener("DOMContentLoaded", function() {
let toggle = document.getElementsByClassName("toggle")[0];
let navigation = document.getElementsByClassName("navigation__mobile")[0];
let showing = false;
toggle.addEventListener("click", function() {
navigation.classList.toggle("d-flex");
if(showing == false) {
navigation.classList.remove("animate-out");
navigation.classList.add("animate-in");
showing = true;
}
else {
navigation.classList.remove("animate-in");
navigation.classList.add("animate-out");
showing = false;
}
})
})

.animate-in {
animation-name: menue-in;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.animate-out {
animation-name: menue-out;
animation-duration: 1s; 
animation-fill-mode: forwards;
}
@keyframes menue-in {
from { transform: translateX(-100%);}
to { transform: translateX(0%);}
}
@keyframes menue-out {
from { transform: translateX(0%);}
to { transform: translateX(-100%);}
}
.navigation__mobile {
width: 200px;
height: 400px;
background: red;
transform: translateX(-100%);
}

<button class="toggle">click</button>
<div class="navigation__mobile">
navaigation
</div>

Answer 2

此处缺少animation-fill-mode属性。因此，如果不使用此属性，则元素将到达原始/默认位置。但我们不希望这样，所以在这里您可以使用animation-mode-fill: forwards属性，以便元素可以保留其最后的位置。

这是更新后的css代码：

.animate-in {
animation-name: menue-in;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.animate-out {
animation-name: menue-out;
animation-duration: 1s; 
animation-fill-mode: forwards;
}
@keyframes menue-in {
from { transform: translateX(-100%);}
to { transform: translateX(0%);}
}
@keyframes menue-out {
from { transform: translateX(0%);}
to { transform: translateX(-100%);}
}