Question

这是事实：我试图向封装在span标签中的字母添加一个简单的动画，它分配了一个类（动画本身），但是没有显示。

我可能错过了一件基本的事情，但我想请您检查一下：

.title-pos{
   top: 40%;
    left: 50%;
    position: fixed;
    max-width: 500px;
    top:0
}

.title-style{
    font-size:35px;
    font-family: 'Noto Sans SC', sans-serif;
}

.letter-rotated{
    font-size:70px;
    font-weight:600;
  transition: 1.5s;
}

.letter-rotated{
    animation-name: example2;
    animation-duration: 2s;
    animation-delay: 0s;
    position:relative;
    -webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
    -moz-animation-name: example2;
    -moz-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    -moz-animation-delay: 0s; /* Safari 4.0 - 8.0 */
}

@-moz-keyframes example2{
        0%   {-webkit-transform: rotate3d(0, 1, 0, 60deg);}
   50%   {-webkit-transform: rotate3d(0, 1, 0, 210deg);letter-spacing: -1px;}
    100%   {-webkit-transform: rotate3d(0, 1, 0, 360deg);}
}

@-webkit-keyframes example2 {
   0%   {-webkit-transform: rotate3d(0, 1, 0, 60deg);}
   50%   {-webkit-transform: rotate3d(0, 1, 0, 210deg);letter-spacing: -1px;}
    100%   {-webkit-transform: rotate3d(0, 1, 0, 360deg);}
}

@keyframes example2 {
    0%   {-webkit-transform: rotate3d(0, 1, 0, 60deg);}
   50%   {-webkit-transform: rotate3d(0, 1, 0, 210deg);letter-spacing: -1px;}
    100%   {-webkit-transform: rotate3d(0, 1, 0, 360deg);}
}

<div class="title-pos title-style">
                    <span class="letter-rotated">H</span><span class="letter-rotated">i</span>
                    </div>

Answer 1

您需要向类display: inline-block;中添加.letter-rotated，因为只能对块元素进行动画处理。

我也将example2更改为使用常规transform而不是带前缀的前缀。

结果：

.title-pos{
   top: 40%;
   left: 50%;
   position: fixed;
   max-width: 500px;
   top:0
}

.title-style{
   font-size:35px;
   font-family: 'Noto Sans SC', sans-serif;
}

.letter-rotated{
   font-size:70px;
   font-weight:600;
   transition: 1.5s;
}

.letter-rotated{
    display: inline-block;
    animation-name: example2;
    animation-duration: 2s;
    animation-delay: 0s;
    position:relative;
    -webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
    -moz-animation-name: example2;
    -moz-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    -moz-animation-delay: 0s; /* Safari 4.0 - 8.0 */
}

@-moz-keyframes example2{
    0%   {-webkit-transform: rotate3d(0, 1, 0, 60deg);}
   50%   {-webkit-transform: rotate3d(0, 1, 0, 210deg);letter-spacing: -1px;}
  100%   {-webkit-transform: rotate3d(0, 1, 0, 360deg);}
}

@-webkit-keyframes example2 {
    0%   {-webkit-transform: rotate3d(0, 1, 0, 60deg);}
   50%   {-webkit-transform: rotate3d(0, 1, 0, 210deg);letter-spacing: -1px;}
  100%   {-webkit-transform: rotate3d(0, 1, 0, 360deg);}
}

@keyframes example2 {
    0%   {transform: rotate3d(0, 1, 0, 60deg);}
   50%   {transform: rotate3d(0, 1, 0, 210deg);letter-spacing: -1px;}
  100%   {transform: rotate3d(0, 1, 0, 360deg);}
}

<div class="title-pos title-style">
  <span class="letter-rotated">H</span><span class="letter-rotated">i</span>
</div>

跨度不加载动画

1 个答案: