title: sass animation did not work after adding a transition-timing function
body: <p>i wanted to create a box with a border and inside it a small div, i wanted when i have a hover over the box the small div inside it will start to animate and but the animation did not start at all, so i deleted hover also the animation did not work in this case too,</p>
  <p>here what i have tried:</p>
  <pre><code>&lt;div class=&quot;row mb-4&quot;&gt;
        &lt;div class=&quot;col col__animation&quot;&gt;
          &lt;div id=&quot;object&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>Scss:</p>
  <pre><code>.col__animation{  
      display: flex;
      border-radius: 1rem !important;
      border: 1px solid #284876;
      height: 200px !important;
      align-items: center;
      
      #object {
          width: 40px;
          height: 50px;
          background: blueviolet;
          margin-top: 2px;
          margin-bottom: 1px;
          margin-right: 3px;
      }
      
      &amp;:hover{
          #object{
              transition: transform 1000ms;
              transition-timing-function: ease-in-out;
          }
      }
  
  }
  </code></pre>
  <p>I am trying to try many animations effects like making the box move to right and go back to initial position and many more animations</p>