如何在CSS中的特定元素中禁用动画

Question

我正在尝试使用其中包含文字的动画圈application。

当我尝试在其中添加文本时，它继承了我不需要的内圈的运动。我想要修复文本而不旋转。我试图使用transform: none !important但它不能与我合作。

这是我的代码：

<div id="container">    

<div id="main">
  <div id="outer-circle">
    <div id="inner-circle">
      <div id="center-circle">
        <div id="content"><p>text</p></div>
      </div>
    </div>
  </div>

</div>

CSS：

#content p{
padding-left:0;
 -o-transform: none !important;

-moz-transform: none !important;

-ms-transform: none !important;

-webkit-transform: none !important;

transform: none !important;

-webkit-animation: none !important;

-moz-animation: none !important;

-o-animation: none !important;

-ms-animation: none !important;

 animation: none !important;

}

Answer 1

更改html中的以下内容

<div id="container">    

<div id="main">
  <div id="outer-circle">
    <div id="inner-circle">
      <div id="center-circle">
      </div>
    </div>
  </div>
   <div id="content"><p>text</p></div>
</div>

在您的css中添加/更改以下内容

#main{
    position:relative;
}
#content{
    right: 0;
    left: 0;
    top: 59px;
    margin: auto;
}