title: Add a delay to the rotation of the button
body: <p>I created a "more" button at the bottom left of my site to display a menu.</p>
  
  <p>When you click on the button, the + becomes x</p>
  
  <p>How to add a delay to the rotation ? 2 seconds</p>
  
  <p>Here is my html code :</p>
  
  <pre><code>&lt;div class="dropup"&gt;
    &lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
      &lt;div class="fa-4x"&gt;
        &lt;span class="fa-layers fa-fw"&gt;
          &lt;i class="fas fa-circle"&gt;&lt;/i&gt;
          &lt;i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"&gt;&lt;/i&gt;
        &lt;/span&gt;
      &lt;/div&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu" aria-labelledby="dropdown-menu-action"&gt;
      &lt;li&gt;&lt;a href="/profil" data-drupal-link-system-path="profil"&gt;&lt;i class="fas fa-id-card fa-lg"&gt;&lt;/i&gt; Créer mon profil&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my style sheet :</p>
  
  <pre><code>#block-views-block-profile-button-create-block-1 {
      position: fixed;
      z-index: 999;
      bottom: 20px;
      left: 20px;
      width: 70px;
      height: 70px;
  }
  
  #block-views-block-profile-button-create-block-1 .btn,
  #block-views-block-profile-button-create-block-1 .btn:focus {
      background-color: initial;
      padding: 0;
      border: 0;
  }
  
  #block-views-block-profile-button-create-block-1 .fa-circle {
      text-decoration: none;
      font-size: 70px;
      color: rgba(63, 182, 24, 0.60);
      border: 3px solid #ffffff;
      border-radius: 50%;
      webkit-box-shadow: 0 0 10px rgba(10,10,0,.9);
      -moz-box-shadow: 0 0 10px rgba(10,10,0,.9);
      -ms-box-shadow: 0 0 10px rgba(10,10,0,.9);
      -o-box-shadow: 0 0 10px rgba(10,10,0,.9);
      box-shadow: 0 0 10px rgba(10,10,0,.9);
  }
  
  #block-views-block-profile-button-create-block-1 .open .fa-plus {
      transform: rotate(-45deg);
  }
  
  #block-views-block-profile-button-create-block-1 .dropdown-menu a {
      color: #000000;
  }
  </code></pre>