How to make the background blur effect appear and disappear slowly when hovering over the box?-CodePudding

I experimented on this box for learning css, but it doesn't work. I tried several times to slow down the blur effect with transition while hovering over the box. Every time I hover over the box, the blur effect instantly changes its color. What is the missing part to do slow down the blur effect?

body::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0px auto;
  background: black;
}

.box {
  position: relative;
  width: auto;
  height: 150px;
  display: flex;
  background: black;
  margin: 30px;
}

.box:before,
.box:after {
  background: linear-gradient(0deg, orange, #1bd3ad99);
}

.box:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
}

.box:after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -35px;
  z-index: -2;
  filter: blur(30px);
}

.box:hover:before {
  background: linear-gradient(90deg, red, blue);
  transition: 2s;
}

.box:hover:after {
  background: linear-gradient(90deg, red, blue);
  transition: 2s;
}

<!DOCTYPE html>
<html lang="de">

<head>
  <title>Title</title>
</head>

<body>
  <div ></div>
</body>

</html>

CodePudding user response：

Maybe you can transition opacity:

body::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0px auto;
  background: black;
}

.box {
  position: relative;
  width: auto;
  height: 150px;
  display: flex;
  background: black;
  margin: 30px;
}

.border:before,
.border:after,
.blur:before,
.blur:after {
  content: '';
  position: absolute;
  transition: opacity 2s;
}

.border:before,
.border:after {
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
}

.blur:before,
.blur:after {
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -35px;
  z-index: -2;
  filter: blur(30px);
}

.border:before,
.blur:before {
  background: linear-gradient(0deg, orange, #1bd3ad99);
}

.border:after,
.blur:after {
  background: linear-gradient(90deg, red, blue);
}

.box:hover .border:before,
.box:not(:hover) .border:after {
  opacity: 0;
}

.box:hover .blur:before,
.box:not(:hover) .blur:after {
  opacity: 0;
}

<div >
  <div ></div>
  <div ></div>
</div>