CSS3中的动画答案

【问题标题】：animation in CSS3CSS3中的动画
【发布时间】：2023-03-24 08:19:01
【问题描述】：

我有以下代码：

<!DOCTYPE HTML>
<html>
<head>
<title>What</title>
<style type="text/css">
#box1
    {
    position: relative;
    width: 300px;
    border: 1px solid black;
    box-shadow:  -3px 8px 34px  #808080;
    border-radius: 20px;
    box-shadow: -8px 5px 5px #888888;
    right: 100px; top:  50px;
    height:  150px;


}
    #box1:hover {

    }

@-webkit-keyframes myfirst
{
0%   { right:100px; top:50px;background: yellow;}

50%  {background:blue; right:700px; top:50px;}

100% { right:100px; top:50px; background: yellow}

}
    #stam {font-size: large;
           background: green;
           width: 100px;
           top: 400px;
           position: absolute;
    }
    #stam:hover { -webkit-animation:myfirst 5s;


    }
</style>
</head>
<body dir="rtl">

<div id="box1"></div>
  <div id="stam">1234567</div>
</body>
</html>

我的问题是：当我将鼠标放在“stam”div上时，我该怎么做（没有JS更好） - “box1” div会移动（将在代码中制作动画）？我添加了我的代码（这是行不通的）。希望得到帮助。谢谢！

【问题讨论】：

如果你不想要 JavaScript，那你为什么要用它来标记它？
我真的不想要JS，但是如果没有JS没办法，那我就在JS里做吧……

标签： css animation hover

【解决方案1】：

如果您的#stam 将在您的#box1 之后，您可以使用~ 选择器 - DEMO

#box1:hover ~ #stam { -webkit-animation:myfirst 5s; }

【讨论】：

谢谢！但我的意思是，当我将鼠标放在“stam”div 上时，只有“box1”会移动。有可能吗？
如果你想在没有 JS 的情况下这样做 - 只需更改元素的顺序 jsfiddle.net/XEZke/2
谢谢它完美的工作！我现在的问题是为什么当我复制这段代码时它不起作用（我将css和HTML复制到我的编辑器并且它不起作用:(也许你可以知道原因？
Google chron 最新版本
哇！万分感谢！！！！你说得对！最后一个问题：这个页面上 div 的位置有什么关系？

【解决方案2】：

如果没有 JS，除非您更改元素的顺序/结构，否则您将无法做到这一点。

这里有一些 jQuery 代码，它将为你做一些基本的动画（在 Webkit 浏览器中），只需在关闭 DOM 之前将其放入 HTML 中：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){
      $('#stam').on('mouseover', function(){
        $('#box1').css('-webkit-animation', 'myfirst');
        $('#box1').css('-webkit-animation-duration', '5s');
      });
    });
</script>

【讨论】：

非常感谢它有效 (jsfiddle.net/a8NYk/1)！但我有两个问题： 1. 为什么当我第二次将鼠标放在“stam”div 中时（完成一个动作后）它不再起作用了？ 2.为什么这段代码（就像评论顶部的这样）不起作用？