need to reverse animate the keyframe when mouse is done of hovering - html

Question

so I am a html and css starter, I wanted to make this cool startup animation which when hovered will rotate and expand like in the code and later I am planing to add a button in between. Till now it works fine but I am stuck on how can I reverse animate it to close, when the mouse in not hovering and also the code is very lengthy so is there a way to make it shorter.
↑ I know this isn't the best explanation. so if you dont understand just run the code and maybe you'll get it.
/*
=======================
Variable
=======================
*/
:root {
/* -----colors----- */
--clr-blue-1: #0C164F;
--clr-blue-2: #5643FD;
--clr-purple-1: #0D0717;
--clr-purple-2: #1D1135;
--clr-purple-3: #7649FE;
--clr-gray-1: #B9A2FE;
--clr-white: #FCFBFE;
--clr-pink-1: #BA1E68;
/* -----fonts----- */
--ff-primary: 'Barlow', sans-serif;
--ff-secondary: 'Nova Square', cursive;
/* --cross animation-- */
--cross-animation-time: 1s;
--cross-opacity: 0.6;
/* -----other----- */
--transition: all 0.3s linear;
--spacing: 0.25rem;
}
/*
=======================
Global CSS
=======================
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--ff-primary);
background-color: var(--clr-white);
color: var(--clr-purple-1);
line-height: 1.5;
font-size: 0.875rem; /* 14 px */
}
a {
text-decoration: none;
}
img {
display: block;
width: 100%;
}
h1,h2,h3,h4,h5 {
text-transform: capitalize;
letter-spacing: var(--spacing);
margin-bottom: 0.75rem;
line-height: 1.25;
}
h1 { font-size: 3rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 0.875rem; }
p { margin-bottom: 1.25rem; }
.clearfix::after, .clearfix::before{
content: "";
clear: both;
display: table;
}
#media screen and (min-width: 800px) {
h1 { font-size: 4rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1rem; }
}
/*
=======================
Header Section
=======================
*/
.header {
min-height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://wallpaperaccess.com/full/17520.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.head-arrows {
background: var(--clr-white);
opacity: 0.4;
display: inline-block;
}
.inline-breaker {
display: block;
}
.arrow-left, .arrow-right {
display: inline-block;
}
.arrow-left {
margin-right: 1.5rem;
}
.arrow-right {
margin-left: 1.5rem;
}
.arrow-up-left {
width: 1.5rem;
height: 6rem;
transform: skewY(45deg);
/* animation: CrossUpLeft 1s ease-in-out 1; */
}
.banner:hover .arrow-up-left {
animation: CrossUpLeft var(--cross-animation-time) ease-in-out 1;
animation-fill-mode: forwards;
}
.arrow-up-right {
width: 1.5rem;
height: 6rem;
transform: skewY(-45deg);
/* animation: CrossUpRight 1s ease-in-out 1; */
}
.banner:hover .arrow-up-right {
animation: CrossUpRight var(--cross-animation-time) ease-in-out 1;
animation-fill-mode: forwards;
}
.arrow-left-up {
display: block;
width: 6rem;
height: 1.5rem;
transform: skewX(45deg);
}
.banner:hover .arrow-left-up {
animation: CrossLeftUp var(--cross-animation-time) ease-in-out 1;
animation-fill-mode: forwards;
}
.arrow-left-down {
display: block;
width: 6rem;
height: 1.5rem;
transform: skewX(-45deg);
}
.banner:hover .arrow-left-down {
animation: CrossLeftDown var(--cross-animation-time) ease-in-out 1;
animation-fill-mode: forwards;
}
.arrow-right-up {
display: block;
width: 6rem;
height: 1.5rem;
transform: skewX(-45deg);
}
.banner:hover .arrow-right-up {
animation: CrossRightUp var(--cross-animation-time) ease-in-out 1;
animation-fill-mode: forwards;
}
.arrow-right-down {
display: block;
width: 6rem;
height: 1.5rem;
transform: skewX(45deg);
}
.banner:hover .arrow-right-down {
animation: CrossRightDown var(--cross-animation-time) ease-in-out 1;
animation-fill-mode: forwards;
}
.arrow-down-left {
width: 1.5rem;
height: 6rem;
transform: skewY(-45deg);
}
.banner:hover .arrow-down-left {
animation: CrossDownLeft var(--cross-animation-time) ease-in-out 1;
animation-fill-mode: forwards;
}
.arrow-down-right {
width: 1.5rem;
height: 6rem;
transform: skewY(45deg);
}
.banner:hover .arrow-down-right {
animation: CrossDownRight var(--cross-animation-time) ease-in-out 1;
animation-fill-mode: forwards;
}
/*
=======================
Animation Section
=======================
*/
#keyframes CrossUpLeft {
5% {
transform: translate(0rem,-1rem) skewY(45deg);
}
50% {
transform: translate(-6rem,4.5rem) skewY(45deg);
}
95% {
transform: translate(0rem,15rem) skewY(45deg);
}
100% {
opacity: var(--cross-opacity);
transform: translate(0,13rem) skewY(45deg);
}
}
#keyframes CrossUpRight {
5% {
transform: translate(0rem,-1rem) skewY(-45deg);
}
50% {
transform: translate(-6rem,4.5rem) skewY(-45deg);
}
95% {
transform: translate(0rem,15rem) skewY(-45deg);
}
100% {
opacity: var(--cross-opacity);
transform: translate(0,13rem) skewY(-45deg);
}
}
#keyframes CrossLeftUp {
5% {
transform: translate(-1rem,0) skewX(45deg);
}
50% {
transform: translate(4.5rem,6rem) skewX(45deg);
}
95% {
transform: translate(15rem,0) skewX(45deg);
}
100% {
opacity: var(--cross-opacity);
transform: translate(13rem,0) skewX(45deg);
}
}
#keyframes CrossLeftDown {
5% {
transform: translate(-1rem,0) skewX(-45deg);
}
50% {
transform: translate(4.5rem,6rem) skewX(-45deg);
}
95% {
transform: translate(15rem,0) skewX(-45deg);
}
100% {
opacity: var(--cross-opacity);
transform: translate(13rem,0) skewX(-45deg);
}
}
#keyframes CrossRightUp {
5% {
transform: translate(1rem,0) skewX(-45deg);
}
50% {
transform: translate(-4.5rem,-6rem) skewX(-45deg);
}
95% {
transform: translate(-15rem,0) skewX(-45deg);
}
100% {
opacity: var(--cross-opacity);
transform: translate(-13rem,0) skewX(-45deg);
}
}
#keyframes CrossRightDown {
5% {
transform: translate(1rem,0) skewX(45deg);
}
50% {
transform: translate(-4.5rem,-6rem) skewX(45deg);
}
95% {
transform: translate(-15rem,0) skewX(45deg);
}
100% {
opacity: var(--cross-opacity);
transform: translate(-13rem,0) skewX(45deg);
}
}
#keyframes CrossDownLeft {
5% {
transform: translate(0,1rem) skewY(-45deg);
}
50% {
transform: translate(6rem,-4.5rem) skewY(-45deg);
}
95% {
transform: translate(0,-15rem) skewY(-45deg);
}
100% {
opacity: var(--cross-opacity);
transform: translate(0,-13rem) skewY(-45deg);
}
}
#keyframes CrossDownRight {
5% {
transform: translate(0,1rem) skewY(45deg);
}
50% {
transform: translate(6rem,-4.5rem) skewY(45deg);
}
95% {
transform: translate(0,-15rem) skewY(45deg);
}
100% {
opacity: var(--cross-opacity);
transform: translate(0,-13rem) skewY(45deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ----------------------------CSS link--------------------------- -->
<link rel="stylesheet" href="style.css">
<!-- --------------------------Google fonts------------------------- -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght#300;400;500&family=Nova+Square&display=swap" rel="stylesheet">
<!-- --------------------------Font Awesome------------------------- -->
<link rel="stylesheet" href="C:\Users\com\Desktop\AFFAN\VisualStudio Codes\ICONS\fontawesome-free-5.15.4-web\css\all.css">
<title>Index</title>
</head>
<body>
<!-- ---------------------------
Header section
---------------------------- -->
<header class="header">
<div class="banner">
<div class="head-arrows arrow-up-left"></div><div
class="head-arrows arrow-up-right"></div><div class="inline-breaker"></div><div class="arrow-left">
<div class="head-arrows arrow-left-up"></div>
<div class="head-arrows arrow-left-down"></div>
</div><div class="arrow-right">
<div class="head-arrows arrow-right-up"></div>
<div class="head-arrows arrow-right-down"></div></div><div
class="inline-breaker"></div><div
class="head-arrows arrow-down-left"></div><div
class="head-arrows arrow-down-right"></div>
</div>
</header>
</body>
</html>