为按钮的旋转添加延迟答案

【问题标题】：Add a delay to the rotation of the button为按钮的旋转添加延迟
【发布时间】：2018-04-03 15:21:07
【问题描述】：

我在网站的左下方创建了一个“更多”按钮来显示菜单。

当你点击按钮时，+变成x

如何为旋转添加延迟？ 2 秒

这是我的 html 代码：

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <div class="fa-4x">
      <span class="fa-layers fa-fw">
        <i class="fas fa-circle"></i>
        <i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
      </span>
    </div>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdown-menu-action">
    <li><a href="/profil" data-drupal-link-system-path="profil"><i class="fas fa-id-card fa-lg"></i> Créer mon profil</a></li>
  </ul>
</div>

这是我的样式表：

#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;
}

【问题讨论】：

标签： html css twitter-bootstrap animation font-awesome

【解决方案1】：

我认为“延迟”是指过渡。如果是这样，请尝试将其添加到您的 CSS：

#block-views-block-profile-button-create-block-1 .fa-plus {
    transition: transform 2s;
}

然后，可能将 2s 更改为 333ms，因为 2s 太慢了。

【讨论】：