css - onmouseenter KeyFrame 只工作一次-6ren

css - onmouseenter KeyFrame 只工作一次

转载作者：太空宇宙更新时间：2023-11-03 17:29:28

25

4

如您所见，以下动画在您第一次将鼠标悬停在正方形上时会起作用，但在第一次后它不再起作用，这就是我的目标:

function js1(x){
x.style.animation="anime 1s";
}

function js2(x){
x.style.animation="anime1 1s";
}

#tria {
width: 0;
height: 0;
border-style: solid;
border-width: 50px 0 50px 200px;
border-color: transparent transparent transparent #007bff;
position:absolute;
top:200px;
}

#tria2 {
width: 0;
height: 0;
border-style: solid;
border-width: 50px 200px 50px 0;
border-color: transparent #007bff transparent transparent;
position:relative; 
float:right;
top:200px;
}

@Keyframes anime{
    from {left: 0;}
    to {left: 200px;}
}
@Keyframes anime1{
    from {left: 0;}
    to {left: -200px;}
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site 2</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="triascript.js"></script>
</head>

<body>

<div id="tria" onmouseenter="js1(this)"></div>
<div id="tria2" onmouseenter="js2(this)" ></div>






</body>
</html>

其他例子:

https://jsfiddle.net/sergiureznicencu/4dyq1dgk/

最佳答案

尝试在 mouseleave 之后重置它:

JS:

function reset(x){
    x.style.animation = "";
}

HTML:

<div id="tria" onmouseenter="js1(this)" onmouseleave="reset(this)"></div>
<div id="tria2" onmouseenter="js2(this)" onmouseleave="reset(this)"></div>

另一种方法是使用 timeOut:

JS

function js1(x){
    x.style.animation="anime 1s";
    setTimeout(function() {x.style.animation = "";}, 1000);
}

function js2(x){
    x.style.animation="anime1 1s";
    setTimeout(function() {x.style.animation = "";}, 1000);
}

HTML:

<div id="tria" onmouseenter="js1(this)"></div>
<div id="tria2" onmouseenter="js2(this)" ></div>

https://jsfiddle.net/4dyq1dgk/4/

关于css - onmouseenter KeyFrame 只工作一次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30873112/

25

4

0

文章推荐： python - 当我点击移动时，如何为 pygame 角色行走设置动画

文章推荐： ruby-on-rails - rails : how to create a list with conditional links

文章推荐： c# - 任务不包含在一行代码中完成的定义

CSS3 圆周运动不适用于带有@-webkit-keyframes 的chrome，而在Firefox 中与@keyframes 一起使用
这是在 Chrome 中不是由 orbit 动画的圆圈。 http://jsfiddle.net/ztkav838/ //CSS @-webkit-keyframes orbit { from
CSS @keyframe 不起作用
我一直在查看示例，但我在这里遗漏了一些东西。我无法启动这个简单的 css 动画，改变某些文本的颜色。当我运行下面的示例时，文本保持黑色。我有一个名为“changeColor”的动画，应用于 h1 元
CSS @keyframe 不工作
我一直在浏览示例，但我会在这里遗漏一些东西。我无法触发这个简单的 css 动画，改变一些文本的颜色。当我运行下面的示例时，文本保持黑色。我有一个名为“changeColor”的动画，应用于 h1 元
javascript - 第二次单击按钮时如何重复@keyframes？
我想在第二次点击按钮时重复@keyframne 动画，但它只生效一次。 $(document).ready(function(){ $('#btn_c
CSS @keyframes 缩放文本模糊
我在@keyframes 动画中缩放文本，当文本增加时，它变得模糊，我该如何防止？ JS Bin Example 谢谢! 最佳答案解决问题的最简单方法是将最大状态比例设置为 1，将较小状态比例设置为
css - @keyframes 改变元素的内容
我正在尝试创建一个关键帧，它会在查看几秒钟后更改 div 容器的内容，但它不起作用。这是我的代码: @-webkit-keyframes k_home_projectSlider { 0%
CSS @keyframes 动画在悬停时不断闪烁
当我创建 @keyframes 动画并将其分配给悬停时的图像时，它会随机闪烁。正如您在 GIF 中看到的那样，它只能随机地正常工作几次。我已经尝试了以下所有方法并为每个供应商添加了前缀: 背面可见性
css3 @keyframes 动画悬停
我有一个 css3 @keyframe 动画，我在控制时遇到了一些麻烦。这是一个分为两部分的动画，有一个平放的高矩形，在第一部分中它假设旋转 90 度并将 z 轴向上平移向您同时也向左平移，然后完成
css - @keyframes 将不同的浏览器版本合并为一个
是否可以减少代码以生成一组可以处理各种浏览器前缀的混合宏？尝试减少代码长度以使用更多mixin 所以代替 @-moz-keyframes orbit { 0% { opaci
css - @Keyframes 不工作
我正在尝试使用 @keyframes 制作动画。但是，该示例不起作用。 .main{ width:100%; height:500px; border: 1px solid black; } @
css - @keyframes 动画中的时间
所以我正在制作一个简单的元素，它会显示一个计时器并仅使用 HTML 和 CSS 计数到 99。但是有人能告诉我为什么我需要延迟我的 100 秒动画以使其与 10 秒动画同步吗？ .second::b
css - @keyframes 文本后面的动画
我有四个动画 div 元素，它们在 section 元素内旋转。 div 元素需要放在文本下方(假设它有背景)，这样就不会出现冲突线，所以我尝试做的是添加 background-color: #aea
CSS- KeyFrame 无效的属性值
不确定我在这里面对的是什么，但我正在尝试应用 CSS 动画。经过一些研究，我认为添加 webkit 前缀将有助于解决问题，但看起来我仍然面临读取无效属性值的问题。这是我当前的代码: .progre
CSS @keyframe 动画缓出
我试图让动画在悬停后缓和到元素的原始值。动画本身工作正常，但是当我将鼠标悬停在该元素上时，它会立即恢复到原始状态，而我希望有 0.2 秒的缓和。有什么帮助吗？这是我的代码: img.footer {
html - @keyframes 不适用于 %
.car1 仅在使用 @keyframes 的 from 和 to 时移动，但在使用时不移动%。谁能解释为什么会这样？ .car1 { animation: car1 2s 2 forwards;
html - @keyframes 不适用于幻灯片
似乎无法让我的图像 slider 工作，我打算将其用作我的页面的标题，但图像不会滑动。我已经尝试过 chrome 的前缀，但它们没有任何区别。这是C
css - 悬停时的@keyframes
我正在尝试做的事情:我在黑盒子里有链接。我试图在悬停时使框的背景从黑色变为蓝色。我不知道该怎么做。这是我的 CSS(我将它设置为 5s 但我真的希望它在悬停时生效) @keyframes navBox
html - @Keyframes 不要移动我的div
我试图用 CSS3 使我的 div 上下移动，但它没有 @-webkit-keyframes mover { 0%, 100% { top: 0%;} 50% { top: 5%;
javascript - @keyframes 动画文字淡入淡出
我正在尝试编写此文本动画效果 ( please see video )，但我离解决方案还很远!! 你能帮帮我吗？也许使用 js 更好？ h1.fadeinone { animation: fadein
css - @keyframes 动画没有运行
这个问题在这里已经有了答案: Using percentage values with background-position on a linear-gradient (2 个答案) 关闭 3

首页

博学

6Ren·AI

商城

css - onmouseenter KeyFrame 只工作一次