.letter { animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate; display: inline-block; transform: translate3d(0, 0, 0); text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em; } @keyframes bounce { from { transform: translate3d(0, 0, 0); text-shadow: rgba(255, 255, 255, 0.4) 0 0 0; } to { transform: translate3d(1em, 0em, 0); text-shadow: rgba(255, 255, 255, 0.4) 0 1em 0.35em; } }让鼠标触碰才能触发一次动画

要让这段CSS动画在鼠标触碰时才触发一次，可以使用JavaScript来实现。可以添加一个事件监听器，当鼠标触碰元素时，将元素的class属性中的动画类删除，然后再次添加动画类，这样就可以重新触发动画。以下是一个实现示例：

HTML:

<div class="letter" onmouseover="animateOnce(this)">Hello</div>

JavaScript:

function animateOnce(element) {
  element.classList.remove("bounce");
  void element.offsetWidth; // 强制浏览器重新计算元素样式
  element.classList.add("bounce");
}

这里使用了`void element.offsetWidth`来强制浏览器重新计算元素样式，以确保动画重新触发。

相关问题

css animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate; 只执行一次

要让CSS动画只执行一次，可以使用`animation-play-state`属性来控制动画的播放状态。将该属性设置为`paused`可以暂停动画，将其设置为`running`可以恢复动画。在CSS中，可以使用`animationend`事件来监听动画结束的事件。以下是一个实现示例：

HTML：

<div class="letter" id="myLetter">Hello</div>

CSS：

.letter {
  animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
  display: inline-block;
  transform: translate3d(0, 0, 0);
  text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
}

@keyframes bounce {
  from {
    transform: translate3d(0, 0, 0);
    text-shadow: rgba(255, 255, 255, 0.4) 0 0 0;
  }
  to {
    transform: translate3d(1em, 0em, 0);
    text-shadow: rgba(255, 255, 255, 0.4) 0 1em 0.35em;
  }
}

JavaScript：

const myLetter = document.getElementById("myLetter");

myLetter.addEventListener("animationend", function() {
  myLetter.style.animationPlayState = "paused";
});

这里使用JavaScript获取到元素`myLetter`，并添加了一个`animationend`事件监听器。当动画结束时，将`animation-play-state`属性设置为`paused`，这样动画就会停止执行。如果需要重新触发动画，可以将`animation-play-state`属性设置为`running`。

css更改一下代码.letter { animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate; display: inline-block; transform: translate3d(0, 0, 0); text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em; } @keyframes bounce { from { transform: translate3d(0, 0, 0); text-shadow: rgba(255, 255, 255, 0.4) 0 0 0; } to { transform: translate3d(1em, 0em, 0); text-shadow: rgba(255, 255, 255, 0.4) 0 1em 0.35em; } } 为鼠标触碰后只执行一次

要让这段CSS动画在鼠标触碰后只执行一次，可以使用JavaScript来实现。可以添加一个事件监听器，当鼠标触碰元素时，将元素的class属性中的动画类删除，这样就可以停止动画。以下是一个实现示例：

HTML:

<div class="letter" onmouseover="stopAnimation(this)">Hello</div>

JavaScript:

function stopAnimation(element) {
  element.classList.remove("bounce");
}

这样当鼠标触碰元素时，动画就会停止执行。如果需要重新触发动画，可以再次添加动画类。