为什么相同的按钮动画不能在表单内部使用?

Question

我尝试在我的待办事项列表上为我的表单提交按钮添加动画。

不幸的是，同样的按钮动画可以在表单外部工作，但在表单内部只能悬停文本。我不知道问题出在哪里?

import React from "react";
class TodoForm extends React.Component {
render() {
return (
<div>
<div className={"container"}>
<form action="">
<h1>Todo List</h1>
<input type="text" placeholder={""}/>
<button className="custom-btn btn">Submit</button>
</form>
<button className="custom-btn btn">Submit</button>
</div>
</div>
);
}
}
export default TodoForm;

.container {
display: flex;
flex-direction: row;
/*align-items: center;*/
justify-content: center;
margin-top: 5%;
}
form {
height: 500px;
width: 400px;
background-color: #f4f7fc;
border: 2px solid;
border-radius: 10px;
box-shadow:8px 8px 5px;
text-align: center;
}
h1 {
font-family: 'Orbitron', sans-serif;
font-weight: 900;
}
input[type='text'] {
border: 1px solid #ddd;
height: 6%;
min-width: 60%;
transition: all ease-in 0.25s;
}
.custom-btn {
margin-left: 5px;
width: 25%;
height: 37px;
border-radius: 5px;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
outline: none;
}
.custom-btn, input[type='text'] {
box-shadow: 1px 1px 1px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
}
.btn {
border: 2px solid #f4f7fc;
color: #f59cb1;
font-family: 'Orbitron', sans-serif;
font-weight: 900;
}
.btn:after {
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
left: 0;
direction: rtl;
z-index: -1;
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
transition: all 0.3s ease;
}
.btn:hover {
color: #FF6F91;
}
.btn:hover:after {
left: auto;
right: 0;
width: 100%;
}
.btn:active {
top: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

背景色不能让你看到动画，只能注释;

form {
height: 500px;
width: 400px;
/*background-color: #f4f7fc;*/
border: 2px solid;
border-radius: 10px;
box-shadow:8px 8px 5px;
text-align: center;
}