How to do a right transition in css?-CodePudding

I defined a transition to my input and it applies but but it disappears without animation. How can I make it animate while disappearing?

input {
    transition: 1s;
}

input:focus {
    background-color: aqua;
    transition: 1s;
}

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="text" autocomplete="on">
</body>
</html>

CodePudding user response：

You need to define a default color for the transition to work

input{
    background-color: white;
    transition: 1s;
}
input:focus{
    background-color: aqua;
    transition: 1s;
}

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="text" autocomplete="on">
</body>
</html>

CodePudding user response：

There are various Approaches for that -

You just need to set default property to the input

input{
    background-color: #fff;
}
input:focus{
    background-color: aqua;
}

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="text" autocomplete="on">
</body>
</html>

You can use :not selector which matches every element that is NOT the specified element/selector. But this is just a approach not a correct way.

input{
    transition: 1s;
}
input:focus{
    background-color: aqua;
}
input:not(:focus){
    background-color: #fff;
}

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="text" autocomplete="on">
</body>
</html>

You can use JS for mouse events like mouseenter and mouseleave.

let inputTxt = document.querySelector('input[type=text]');

inputTxt.addEventListener("mouseenter", function() {
  inputTxt.style.backgroundColor = "aqua";
});

inputTxt.addEventListener("mouseleave", function() {
  inputTxt.style.backgroundColor = "#fff";
});

input {
  background-color: #fff;
  transition: 1s;
}

<!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">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <input type="text" autocomplete="on">
</body>

</html>