Css Transition is not working as intended - html

Question

I could really use some help in my css code.
I'm trying to make my <h1> change color and shape using the transition property.
I want the shape and color to change slowly while I hover over the headline,
but currently only the color is affected, and the shape changes independently.
my code is as follows :
html :
<h1 class="box">Abcdefg</h1>
css :
.box {
background: #2db34a;
margin: 1px auto;
transition: background 1s linear;
border-radius: 0.3%;
color: white;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
width: 400px;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
thanks.

Answer 1

You just need to add border-radius to your transition
.box {
background: #2db34a;
margin: 1px auto;
transition: background 1s linear, border-radius 1s linear;
border-radius: 0.3%;
color: white;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
width: 400px;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
<h1 class="box">Abcdefg</h1>

Answer 2

You have the next line of code:
transition: background 1s linear;
The transition only works on the background right now. If you change background to all the transition will work on both background and border-radius, like this:
transition: all 1s linear;

Answer 3

Use all in the transition setting to affect both the border-radius and the background-color:
.box {
background: #2db34a;
margin: 1px auto;
transition: all 1s linear;
border-radius: 0.3%;
color: white;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
width: 400px;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
<h1 class="box">Abcdefg</h1>

Answer 4

Transitions work only on properties that have numbers. That being said, the question is it should work for the border-radius as well. But the problem here is the browser is unable to find the initial state of the property. Just add border-radius: 0% and it should work.

Answer 5

HTML code:
<p> the code is :</p>
<h1 class="sheet">Abcdefg</h1>
CSS Code:
css code :
.sheet {
background: blue;
margin: 1px auto;
transition: background 5s linear , border-radius 5s ease-in-out ;
color: white;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
width: 400px;
}
.sheet:hover {
background: red;
color:grey;
border-radius: 40%;
}