是什么原因导致此div：hover动画不起作用？

Question

div {
    background-color:green;
    height:500px;
    width:500px;
    margin:auto;
    border-radius:10%;
    text-indent: 7px;
    border: 4px solid red;
    box-sizing:border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

div:hover {
    animation-name: animation;
    animation-duration: 0.5s;
    animation-fill-mode:forwards;}
}

@keyframes animation {
    0%{
        border-radius:10%;
        background-color:orange;}
    33%{
        border-radius:22%;
        background-color:#bad455;}
    66%{
        border-radius:35%;
        background-color:purple;}
    99%{
        border-radius:50%;
        background-color:black;
    }
    
}

<div>
    <p>This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text .</p>
</div>

您好，我目前正在尝试学习动画。现在看来，我已正确完成了所有操作。但是，当我将鼠标悬停在div上时，即使我正确地制作了整个动画，动画也基本上什么也不做。如果我尝试不将其悬停在div上执行此操作，那么它将起作用。但是，一旦我添加：hover，它似乎就不起作用了。预先感谢。

Answer 1

css中有一个额外的}。 这是工作代码：

div {background-color:green;
			height:500px;
			width:500px;
			margin:auto;
			border-radius:10%;
			text-indent: 7px;
			border: 4px solid red;
			box-sizing:border-box;
			  display: flex;
  justify-content: center;
  align-items: center;
	}

	div:hover {
		animation-name: animation;
	animation-duration: 0.5s;
	animation-fill-mode:forwards;}
	

  		@keyframes animation {
  			0%{
  				border-radius:10%;
  				background-color:orange;}
  			33%{
  				border-radius:22%;
  				background-color:#bad455;}
  			66%{
  				border-radius:35%;
  				background-color:purple;}
  			99%{
  				border-radius:50%;
  				background-color:black;
  			}

  		}

<div><p>This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text .</p> </div>