title: CSS transition works only with one element
body: <p>I have been trying to make a working phone for a school project. In HTML. Now, I added a class with JS with the following:</p>
  <pre><code>     document.querySelector(&quot;.app-content&quot;).classList.add(&quot;app-on&quot;);
  </code></pre>
  <p>Now, the class .app-on changes the width, height and font-size of my div. It has a transition built in. However, the width and height instantly pop up, while the font-size transitions just like i wanted.</p>
  <p>.app-content is the class I am focusing on. The one I have added the animation to is the first one of that class to appear in the code</p>
  <p>The full code for reference:</p>
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot;&gt;
          &lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
          &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot;&gt;
          &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Inter:wght@900&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
      &lt;/head&gt;
      &lt;body onload=&quot;startTime()&quot;&gt;
          &lt;!-- phone --&gt;
          &lt;div id=&quot;phone-border&quot;&gt;
              &lt;!-- screen --&gt;
  
              &lt;div id=&quot;phone-screen&quot;&gt;
                  &lt;p id=&quot;time&quot; style=&quot;font-weight: 600; font-size: 30px; float: left; color: white; padding: 10px;&quot;&gt;&lt;/p&gt;
  
  
                  &lt;div id=&quot;app-container&quot;&gt;
                      &lt;div class=&quot;app-wrapper&quot; style=&quot;z-index: 10000;&quot;&gt;
                          &lt;img src=&quot;https://img.icons8.com/ios/452/coronavirus--v1.png&quot; class=&quot;app-icon&quot; style=&quot;left: 10%; top 60%&quot; onclick=&quot;openMA()&quot;&gt;
                          &lt;div class=&quot;app top-app left&quot; href=&quot;#&quot;&gt;Malware-Arten&lt;/div&gt;
                          &lt;div class=&quot;app-content&quot; style=&quot;position: absolute; left: 0; color: black;&quot;&gt;asdasdfasdfasdfasdf&lt;/div&gt;
                      &lt;/div&gt;
  
  
                      &lt;div class=&quot;app-wrapper&quot;&gt;
                          &lt;img src=&quot;https://www.freeiconspng.com/thumbs/shield-png/shield-png-1.png&quot; class=&quot;app-icon&quot; style=&quot;right: 15%; top 60%&quot; onclick=&quot;openS()&quot;&gt;
                          &lt;div class=&quot;app top-app right&quot; href=&quot;#&quot;&gt;Schutz&lt;/div&gt;
                          &lt;div class=&quot;app-content&quot;&gt;&lt;/div&gt;
                      &lt;/div&gt;
  
  
                      &lt;div class=&quot;app-wrapper&quot;&gt;
                          &lt;img src=&quot;https://www.freeiconspng.com/thumbs/youtube-logo-png/hd-youtube-logo-png-transparent-background-20.png&quot; class=&quot;app-icon&quot; style=&quot;left: 10%; bottom: 17%&quot; onclick=&quot;openYT()&quot;&gt;
                          &lt;div class=&quot;app bottom-app left&quot; href=&quot;#&quot;&gt;Youtube-Info&lt;/div&gt;
                          &lt;div class=&quot;app-content&quot;&gt;&lt;/div&gt;
                      &lt;/div&gt;
  
  
                      &lt;div class=&quot;app-wrapper&quot;&gt;
                          &lt;img src=&quot;https://www.designbust.com/download/1024/png/email_icon_transparent512.png&quot; class=&quot;app-icon&quot; style=&quot;right: 15%; bottom: 17%&quot; onclick=&quot;openM()&quot;&gt;
                          &lt;div class=&quot;app bottom-app right&quot; href=&quot;#&quot;&gt;E-Mail&lt;/div&gt;
                          &lt;div class=&quot;app-content&quot;&gt;&lt;/div&gt;
                      &lt;/div&gt;
  
  
                  &lt;/div&gt;
  
  
                  &lt;div class=&quot;blackscreen&quot;&gt;
  
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- /screen --&gt;
  
              &lt;!-- homebutton --&gt;
              &lt;div style=&quot;position: fixed;&quot;&gt;
                  &lt;button class=&quot;pushable homebutton&quot; id=&quot;hb&quot;&gt;
                      &lt;div class=&quot;front home-front&quot;&gt;
                      &lt;/div&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;!-- /homebutton --&gt;
  
          &lt;/div&gt;
          &lt;!-- /phone --&gt;
      &lt;/body&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;script.js&quot;&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  <p>CSS here:
  I have marked the class with a comment.</p>
  <pre><code>@import url('https://rsms.me/inter/inter.css');
  html { font-family: 'Inter', sans-serif; }
  
  body {
      background: #2c2b30;
      font-family: &quot;Open Sans&quot;, Arial, Helvetica, sans-serif;
      font-weight: 900;
      color: #f58f7c;
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  #phone-border{
      width: 360px;
      height: 630px;
      background: #4f4f51;
      margin: auto;
      padding-top: 60px;
      border-radius: 20px;
      border-bottom: 13px solid #303030;
      border-left: 13px solid #404040;
  }
  
  
  #phone-screen {
      width: 92%;
      height: 84%;
      background: #f58f7c;
      margin: auto;
      position: relative;
  }
  
  
  
  #app-container {
      position: absolute;
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 100%;
      height: 63%;
  }
  
  .app-icon {
      position: absolute;
      width: 100px; height: 100px;
      border-radius: 10px;
      border: 3px solid #000;
      -webkit-transition: all 0.1s ease-in;
      -moz-transition: all 0.1s ease-in;
      -o-transition: all 0.1s ease-in;
      transition: all 0.1s ease-in;
  }
  .app-icon:hover {
      transform: translateY(-10px);
  }
  
  .app {
      color: #414b41;
      margin: auto;
  }
  .top-app {
      position: absolute;
      bottom: 60%;
  }
  .bottom-app {
      position: absolute;
      bottom: 10%;
  }
  .left {
      left: 6%;
  }
  .right {
      right: 21%;
  }
  
  .app-content {
      background: #404040;
      font-size: 0;
      -webkit-transition: all 0.2s ease-in;
      transition: all 0.2s ease-in;
  }
  
  .app-on { /* -----------------------THIS-------------------------*/
      font-size: 15px;
      width: 100px;
      height: 100px;
      -webkit-transition: all 0.2s ease-in;
      transition: all 0.2s ease-in;
  }
  
  
  .blackscreen {
      width: 100%;
      height: 100%;
      background: #000;
      margin: auto;
      position: absolute;
      z-index: 2;
      transition: all 0.5s;
  }
  
  .fade {
      background: transparent;
      transition: 1s;
  }
  
  .phone-on {
      box-shadow: 0px 0px 30px #f58f7c;
      transition: 1.2s;
  }
  
  .homebutton {
      width: 60px;
      height: 60px;
      background: #404040;
      border-radius: 100px;
      border: none;
      padding: 0;
      cursor: pointer;
      outline-offset: 4px;
      transition: all 0.5s;
      position: fixed;
      left: 48%;
      top: 82%;
      margin-top: 20px;
  }
  
  .home-front {
      display: block;
      padding-top: 60px;
      border-radius: 100px;
      font-size: 1.25rem;
      background: #202020;
      color: white;
      transform: translateY(-6px);
      position: relative;
      left: 3px;
  }
  
  .homebutton:hover .front {
      transform: translateY(-8px);
      left: 4px;
      transition: 0.08s;
  }
  .homebutton:active .front {
      transform: translateY(-2px);
      left: 1px;
      transition: 0.08s;
  }
  </code></pre>
  <p>JS here:</p>
  <pre><code>var on = false;
  var homeButton = document.getElementById(&quot;hb&quot;);
  homeButton.onclick = function(){
      if (on==false) {
          document.querySelector(&quot;.blackscreen&quot;).style.backgroundColor = &quot;transparent&quot;;
          document.getElementById(&quot;phone-screen&quot;).classList.add('phone-on');
          on=true;
          setTimeout(function(){document.querySelector(&quot;.blackscreen&quot;).style.zIndex = &quot;-10&quot;;},500);
      }
      else if(on==true) {
          console.log(123);
      }
  }
  
  
  function openMA() {
      console.log(&quot;Malware-Arten&quot;)
      var malwareArten = true;
      document.querySelector(&quot;.app-content&quot;).classList.add(&quot;app-on&quot;);
  }
  function openS() {
      console.log(&quot;Schutz&quot;)
      var schutz = true;
  }
  
  function openYT() {
      console.log(&quot;YT&quot;)
      var yt = true;
  }
  
  function openM() {
      console.log(&quot;Mail&quot;)
      var mail = true;
  }
  
  
  function startTime() {
      var today = new Date();
      var h = today.getHours();
      var m = today.getMinutes();
      var s = today.getSeconds();
      m = checkTime(m);
      s = checkTime(s);
      document.getElementById(&quot;time&quot;).innerHTML = h + &quot;:&quot; + m + &quot;:&quot; + s;
      var t = setTimeout(startTime, 1000);
  }
  function checkTime(i) {
      if (i &lt; 10) {i = &quot;0&quot; + i};  // add zero in front of numbers &lt; 10
      return i;
  }
  </code></pre>