无法通过 Jquery (.css, .animate) 找到使用关键帧动画的方法

Question

我的html

        <fieldset class="field_one">
            <legend>Character Creation <i class="fa-solid fa-signs-post"></i></legend>
            <div id="message">...............</div>
            <img src="./image/index1.png" id="mainImage" alt="">
            <div class="button"><a href="#" id="btnImage">¡Generate Character!</a></div> 
            <div class="button"><a href="#" id="btnName">¡Generate Nickname!</a></div>
        </fieldset>

我的css关键帧

@keyframes rainbow {
    0%   {color:red;}
    25%  {color:blue;}
    50%  {color:gold;}
    75%  {color:greenyellow;}
    100% {color:red;}
}

我的jqueryjs

$('fieldset').hover(function() {
        $(this).css({"animation":"rainbow","font-size":"18pt"}, 1000);
});

是为了我需要做的工作，我真的找不到一种方法让它与 jquery 一起工作（我知道使用普通的 css 更容易）

Answer 1

使用动画规则设置 class，然后使用 addClass()

$('fieldset').hover(function() {
   $(this).addClass('rainbowAnim');
});

@keyframes rainbow {
    0%   {color:red;}
    25%  {color:blue;}
    50%  {color:gold;}
    75%  {color:greenyellow;}
    100% {color:red;}
}
.rainbowAnim {
  -webkit-animation: rainbow 5s infinite;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="field_one">
    <legend>Character Creation <i class="fa-solid fa-signs-post"></i></legend>
    <div id="message">...............</div>
    <img src="./image/index1.png" id="mainImage" alt="">
    <div class="button"><a href="#" id="btnImage">¡Generate Character!</a></div> 
    <div class="button"><a href="#" id="btnName">¡Generate Nickname!</a></div>
</fieldset>

无法通过 Jquery (.css, .animate) 找到使用关键帧动画的方法

Cant find the way to use a Keyframe animation via Jquery (.css, .animate)

html

css

jquery

animation

keyframe