Recently, I've been building a website for a keyboard-enthusiast business. On the home page, I have category buttons that animate when hovered. However, it abruptly ends once the mouse cursor is no longer on it. To combat this problem, I decided to use the psuedo-elements: :hover::after
. I created a new animation called afterbuttonslide
with the following code and assigned it to the psuedo-element like this:
@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;
}
This however doesn't execute the animation as intended. After reading other Stack Overflow answers such as Deepak Yadev's and an article from GeeksforGeeks, I tried adding content: "";
and temporaily removing my psuedo-element :hover
with underwhelming results. Perhaps the psuedo-element :after
is simply ineffective on anything but anchors? I'm willing to take any answer that can provide me with the same result I intended before.
Rest of my code:
<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>