CODEWITHSUNDEEP
htmlcss
user8083269
user8083269

Reputation:

Css Transition is not working as intended

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.

Upvotes: 2

Views: 72

Answers (5)

Gourav Sharma
Gourav Sharma

Reputation: 1

    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%;

}

Upvotes: 0

Team Kitsune
Team Kitsune

Reputation: 101

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.

Upvotes: 0

Johannes
Johannes

Reputation: 67728

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>

Upvotes: 2

Robert
Robert

Reputation: 141

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;

Upvotes: 2

Michael Coker
Michael Coker

Reputation: 53664

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>

Upvotes: 2

Related Questions