title: CSS transition conflict each others
body: <p>Im trying to make some react app ,and i have a problem with the css. When i add (is-size-changed) class to the div element(navi) and trying to scrolling transition with the background-color dont work and show the color instant.</p>
  <p>when i remove background color class, size its working normally.
  CSS code:</p>
  <pre><code>    .navi {
      height: 10rem;
      /* background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%,grey 100%); */
      /* background-color: rgba(0,0,0,.9); */
      align-items: center;
      text-align: center;
      transition: 1s;
      
  
  }
  
  .navi ul{
      display: flex;
      list-style: none;
      justify-content: space-around;
  }
  
  .navi .links{
      text-decoration: none;
      margin: 1.4rem 1.4rem 1.4rem 1.4rem;
      outline: none;
      font-size: 150%;
      height: 2.5rem;
      top: 10%;
      padding: 1rem;
      display: inline-block;
      border-radius: 1rem;
      /* transition: background-color 1s ease;
      transition: height 1s ease; */
  }
  
  .links:hover {
      background-color: darkgray;
      padding: 1.3rem;
      transition: 0.8s;
      justify-content: space-around;
  
  }   
  
  .navi-line{
      display: block;
      background-color: red;
      width: 100%;
      height: 5px;
  }
  
  .sticky{
      position: sticky;
      top: 0;
      width: 100%;
      transition: 2s;
  
  }
  
  .is-color-changed{
      transition: background-color 1s ease;
      background-color: rgba(0,0,0,.9);
  }
  
  .is-size-changed{
      /* transition: 1s; */
      transform: scaley(1);
      transition: height 1s ease;
      height: 6rem;
      
      /* background: linear-gradient(to bottom, rgb(84, 84, 84) 0%,grey 100%); */
  
  }
  
  .text-color-black a{
      color: black;
  }
  
  .text-color-white a{
      color: #fafafa;
      
  }
  
  
          /* DIFFERENT BACKGROUND */
  /* 
  .background-color-transition{
      transition: background-color 0.5s ease;
      background-color: rgba(0,0,0,.9);
  } */
  </code></pre>
  <p>JS/React:</p>
  <pre><code>import { useState, useEffect } from 'react';
  import './Navigation.css';
  
  const Navigation = () =&gt; {
  
      useEffect(() =&gt; {
          const header = document.getElementById(&quot;header&quot;);
          const scrollCallBack = window.addEventListener(&quot;scroll&quot;, () =&gt; {
              if (window.pageYOffset &gt;= header.offsetTop) {
                  header.classList.add(&quot;sticky&quot;, &quot;text-color-white&quot;, &quot;is-color-changed&quot;, &quot;is-size-changed&quot;);
              } else {
                  header.classList.remove(&quot;sticky&quot;, &quot;text-color-white&quot;, &quot;is-color-changed&quot;, &quot;is-size-changed&quot;);
                  header.classList.add(&quot;text-color-black&quot;);
  
              }
          });
          return () =&gt; {
              window.removeEventListener(&quot;scroll&quot;, scrollCallBack);
          };
      }, []);
  
      
      return (
          &lt;div id='header' className='navi'&gt;
              &lt;span className='navi-line'&gt;&lt;/span&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a className='links' href=&quot;/heatPump&quot;&gt;Термопомпи&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a className='links' href=&quot;/heating&quot;&gt;Отопление&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a className='links' href=&quot;/cooling&quot;&gt;Охлаждане&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a className='links' href=&quot;/hotWater&quot;&gt;Топла вода&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a className='links' href=&quot;/energy&quot;&gt;Енергия&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a className='links' href=&quot;/projects&quot;&gt;Проекти&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              
          &lt;/div&gt;
  
      )
  }
  </code></pre>
  <p>export default Navigation;</p>