CSS 伪元素 :hover::after 不执行动画

Question

最近，我一直在为一家键盘爱好者公司建立一个网站。在主页上，我有类别按钮，悬停时会显示动画。但是，一旦鼠标光标不再位于其上，它就会突然结束。为了解决这个问题，我决定使用伪元素：:hover::after。我使用以下代码创建了一个名为 afterbuttonslide 的新动画，并将其分配给伪元素，如下所示：

    @keyframes afterbuttonhoverslide {
        0% {
            padding: 0 25 0 0;
            }
        100% {
            padding: 0;
            }
        }
    
    .homepagecategories:hover::after {
        animation: 0.2s ease-out 0s 1 afterbuttonhoverslide;
        animation-fill-mode: forwards;  
        }

但这并没有按预期执行动画。在阅读了 GeeksforGeeks 的 and an article 等其他 Stack Overflow 答案后，我尝试添加 content: ""; 并暂时删除我的伪元素 :hover，但结果并不理想。也许伪元素 :after 对锚点以外的任何东西都无效？我愿意接受任何可以为我提供与我之前预期的结果相同的答案。

我的其余代码：

<head>
    <title>HotDogKeyboards</title>
    <link rel="icon" href="https://drive.google.com/uc?export=download&id=1Ka7ylovILyZSEcIUTituT9f_uzFdKfCl">
</head>
<body style="margin: 0; padding: 0; background-color: #2e3440;">

<!-- This style element is temporary to display CSS on the same script as my HTMl code. -->
<style>
    /* Imported Fonts */
@font-face {
    font-family: Roboto;
    src: url(https://drive.google.com/uc?export=download&id=1PopP9idetRz1ULFNGXyP6kraMyV4bt5F);
    }

@font-face {
    font-family: Poppins;
    src: url(https://drive.google.com/uc?export=download&id=16AyE8WbBCW13Z-Ixbmctio3TKuajAhwt);
    }

@font-face {
    font-family: indie-flower;
    src: url(https://drive.google.com/uc?export=download&id=1NosWGJF7-PsfwCHZI_es8anZhO_bz8wu);
    }

@font-face {
    font-family: red-seven;
    src: url(https://drive.google.com/uc?export=download&id=1Xs4IIqDBGc_lCYFBLeC6DPhohsJPBeTp);
    }

@font-face {
    font-family: good-times;
    src: url(https://drive.google.com/uc?export=download&id=1nj8_G-SMT-2Bqh8kVdRJ0w7D8DXzmomC);
    }


/* Property specific classes*/
h1.temporarywait {
    font-family: Roboto;
    }

p.temporarywait {
    font-family: Poppins;
    }

img.mainicon {
    width: 13%;
    }

a.headerbuttons {
    padding: 10px 15px 10px 15px;
    font-size: 27px;
    font-family: indie-flower;
    text-decoration: none;
    color: black;
    }

a:visited.headerbuttons {
    color: black;
    }

a:active.headerbuttons {
    color: white;
    background-color: #FFFF9F;
    margin: 0;  
    }

a:hover.headerbuttons {
    background-color: #FFF017;
    color: white;
    }

a:hover.button {
    background-color: #EFCC00;
    }

a:visited.button {
    color: black;
    }

p.categorytop {
    font-family: good-times;
    color: white;
    font-size: 3vw;
    text-align: center;
    }


/* Classes */
.header {
    background-color: #EAAA00;
    padding: 25px;
    margin: 0;
    position: fixed;
    z-index: 99;
    width: 100%;
    /*TEMPORARY, REMOVE WHEN NECESSARY*/
    opacity: 0%;
    }

.headerbuttons {
    display: inline-block;
    padding: 2.5px 4px 2.5px 4px;
    margin: 0;
    }

.headerlinkwrapper {
    background-color: #EFCC00;
    width: 100%;
    position: fixed;
    margin: 0 0 0 -25;
    z-index: 99;
    }

.featuredproducttext {
    position: absolute;
    top: 50%;
    left: 30px;
    color: white;
    font-family: red-seven;
    font-size: 2.2vw;
    }

.featuredproductbutton {
    position: absolute;
    top: 75%;
    left: 30px;
    }

.button {
    background-color:#EAAA00;
    text-align: center;
    text-decoration: none;
    padding: 1.5vw 2vw;
    font-size: 2vw;
    font-family: Poppins;
    color: black;
    }

.featuredproductinfo {
    position: absolute;
    top: 60%;
    left: 30px;
    color: white;
    font-size: 1.3vw;
    font-family: red-seven;
    }

.categorytop {
    padding: 0.5em 0 0.5em 0;
    background-color: #434c5e;
    margin: 4px 0 0 0;
    }

.categorytext {
    color: #e5e9f0;
    font-family: good-times;
    font-size: 1.7vw;
    position: absolute;
    top: 23%;
    left: 5px;
    }
/*Class Animations*/
.featuredproducttext {
    animation: 1.7s ease-out 0s 1 slidein;
    }

.featuredproductinfo {
    animation: 1s ease-out 0s 1 slidein;
    animation-fill-mode: both;
    animation-delay: 1.7s;
    }

.featuredproductbutton {
    animation: 1.5s ease-out 0s 1 slideappearance;
    animation-fill-mode: both;
    animation-delay: 2.9s;
    }

.headershowanimation {
    animation: 1s ease-out 0s 1 headershow;
    }

.headerhideanimation {
    animation: 1s ease-out 0s 1 headershow;
    }

.homepagecategories {
    width: 20%; 
    height: 17.6vw;
    transform: skew(-20deg);
    display: inline-block;
    margin: -5;
    overflow: hidden;
    }

/*Homepage Category Images*/
.category1 {
    background-image: url("https://drive.google.com/uc?export=download&id=1EmJgZ15Se4XmJUSD4asHA2fu-vhYphvx");
    }

.category2 {
    background-image: url("https://drive.google.com/uc?export=download&id=1iyEtTFXeYrKK-shG16nixjcX7W54vqv1");
    }

.category3 {
    background-image: url("https://drive.google.com/uc?export=download&id=1iPUbZjhhx7Nu_8tPoRniJGjPcj6zJAI6");
    }

.category4 {
    background-image: url("https://drive.google.com/uc?export=download&id=1LAIxyXDgEhromN7v5loednVbX97UtlIB");
    }

.category5 {
    background-image: url("https://drive.google.com/uc?export=download&id=1Yxm4BQx36QbMNrq4Wox7ox5gR0u0yjfu");
    }

/*End of Category Images*/
.homepagecategorycontainer {
    overflow: hidden;
    background-color: #333333; 
    position: relative;
    }

.homepagecategorycontent {
    transform: skew(20deg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 33vw;
    height: 33vw;
    position: absolute;
    }

.homepagecategories:hover::after {
    animation: 0.2s ease-out 0s 1 afterbuttonhoverslide;
    animation-fill-mode: forwards;  
    }

.homepagecategories:hover {
    animation: 0.5s ease-out 0s 1 buttonhoverslide;
    animation-fill-mode: forwards;
    }

.homepagecategories:hover .homepagecategorycontent {
    animation: 0.5s ease-out 0s 1 buttonimageslide;
    animation-fill-mode: forwards;
    }

.homepagecategories:hover .categorytext {
    animation: 0.7s ease-out 0s 1 slightright;
    animation-fill-mode: forwards; 
    }

/* IDs */
#featuredproduct {
    position: relative;
    text-align: center;
    }
/*Animations*/
@keyframes slidein {
    0% {
        transform: translateX(-100%);
        opacity: 0%;
        }
    100% {
        transform: translateX(-20);
        opacity: 100%;
        }
    }

@keyframes slideappearance {
    0% {
        opacity: 0%;
        top: 77%;
        }
    100%{
        opacity: 100%;
        top: 75%;
        }
    }

@keyframes headerhide {
    0%  {
        top: 120px;
        }
    100% {
        top: -100%
        }
    }

@keyframes headershow {
    0%  {
        top: -100%;
        }
    100%{
        top: 120px;
        }
    }

@keyframes buttonhoverslide {
    0% {
        padding: 0;
        }
    100% {
        padding: 0 25 0 0;
        }
    }

@keyframes buttonimageslide {
    0% { 
        background-position: 0 0;
        }
    100% {
        background-position: -30 0;
        }
    }

@keyframes afterbuttonhoverslide {
    0% {
        padding: 0 25 0 0;
        }
    100% {
        padding: 0;
        }
    }

@keyframes floatandappear {
    0% {
        opacity: 0%;
        }
    100% {
        opacity: 100;
        transform: translateX();
        }
    }

@keyframes slightright {
    0% {
        top: 23%;
        left: 5px;
        }
    100% {
        top: 23%;
        left: 10px;
        }
    }
</style>
    <!-- Fixed Header -->
            <header>
                <div class="header" id="header">
                    <div>
                        <center>
                            <img class="mainicon" src="https://drive.google.com/uc?export=download&id=1blJIRZ7SCMqXqTPJ0REXchspxgWJ5k7t">
                        </center>
                    </div>
                    <center>
                        <div class="headerlinkwrapper">
                            <div class="headerbuttons">
                                <a class="headerbuttons" href="#">Test</a>
                            </div>
                            <div class="headerbuttons">
                                <a class="headerbuttons" href="#">Test</a>
                            </div><div class="headerbuttons">
                                <a class="headerbuttons" href="#">Test</a>
                            </div>
                        </div>
                    </center>
                    </div>
                </div>
                </header>
        <!--Featured Product Header -->
            <div id="toppage">
            </div>
        <!-- Featured Product Section -->
            <div id="featuredproduct">
                <img src="https://drive.google.com/uc?export=download&id=1_b_5r5jFu92jUrou8p9Y4GgTfaABG2Jq" width="100%">
        <!-- Product Name -->
                <div class="featuredproducttext">
                    Placeholder Keyboard
                </div>
        <!-- Brief Product Info -->
                <div class="featuredproductinfo">
                    Awesome, and even more awesome. 
                </div>
                <div class="featuredproductbutton">
                    <a href="#" class="button">Learn More</a>
                </div>
            </div>
            </div>
        <!-- Categories -->
            <div class="categorytop">
                <p class="categorytop">Categories</p>
            </div>
            <center>
                <div class="homepagecategorycontainer">
                <a href="#">
                    <div class="homepagecategories">
                        <div class="homepagecategorycontent category1">
                        </div>
                            <div class="categorytext">
                                Switches
                            </div>
                    </div>
                </a>
                <a href="#1">
                    <div class="homepagecategories">
                        <div class="homepagecategorycontent category2">
                        </div>
                            <div class="categorytext">
                                Keycaps
                            </div>
                    </div>
                </a>
                <a href="#2">
                    <div class="homepagecategories">
                        <div class="homepagecategorycontent category3">
                        </div>
                            <div class="categorytext">
                                Keyboards
                            </div>
                    </div>
                </a>
                <a href="#3">
                    <div class="homepagecategories">
                        <div class="homepagecategorycontent category4">
                        </div>
                            <div class="categorytext">
                                Group Buy
                            </div>
                    </div>
                </a>
                <a href="#4">
                    <div class="homepagecategories">
                        <div class="homepagecategorycontent category5">
                        </div>
                            <div class="categorytext">
                                Misc.
                            </div>
                    </div>
                </a>
            </div>
            </center>
        </body>

Answer 1

您可以在元素上使用 :hover css 事件。 ::after 不是你需要的。

您不需要动画来执行此操作。您可以将 transition: xx 设置到您的按钮（不是 :hover），当按钮悬停时您可以更改填充或调整它的大小。

并且记住padding: 0 25 0 0;是不正确的，你必须指定25什么。例如 25px.

举个例子：

  button {
    transition: all .2s linear;
  }

  button:hover {
    padding: 0 25px 0 0;
  }

<button>Hello</button>

CSS 伪元素 :hover::after 不执行动画

CSS psuedo-elements :hover::after doesn't execute an animation

html

css

css-animations