Question

我已经使用css3动画来旋转小文本，但它不会旋转。

    <h1 class="title">Coming Soon <small>btw learning</small></h1>


      small {
animation:spin 4s linear infinite;
              }

     @-webkit-keyframes spin {
     0% { -webkit-transform: rotate(0deg); }
     20% { -webkit-transform: rotate(90deg); }
     25% { -webkit-transform: rotate(90deg); }
     45% { -webkit-transform: rotate(180deg); }
     50% { -webkit-transform: rotate(180deg); }
     70% { -webkit-transform: rotate(270deg); }
     75% { -webkit-transform: rotate(270deg); }
     100% { -webkit-transform: rotate(360deg); }
      }

Answer 1

使用display:inline-block;

<h1 class="title">Coming Soon <span class="animation">btw learning</span></h1>


        .title
        {
        font-family: 'Cinzel Decorative', cursive;
        text-align: center;
        font-size: 100px;
        margin-top: 25%;
        }


      .animation {
          animation:spin 4s linear infinite;
          display:inline-block;
        }

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  20% { -webkit-transform: rotate(90deg); }
  25% { -webkit-transform: rotate(90deg); }
  45% { -webkit-transform: rotate(180deg); }
  50% { -webkit-transform: rotate(180deg); }
  70% { -webkit-transform: rotate(270deg); }
  75% { -webkit-transform: rotate(270deg); }
  100% { -webkit-transform: rotate(360deg); }
}

css3旋转动画不会工作

1 个答案: