Animate.css一个字母的一个字母

Question

我正在尝试使用animate.css动画一个单词的字母。动画在一段时间内不起作用，我找不到关于这个主题的任何好的信息。如何使用animate.css为单词的一个字母设置动画？ 这是我的代码：

SELECT EXTRACT(Month FROM ym.date) as month,
       EXTRACT(Year FROM ym.date) as year,
       ROUND(AVG(AVG(q_overall)) OVER (ORDER BY EXTRACT(Year FROM ym.date), EXTRACT(Month FROM ym.date)), 2)
FROM
(SELECT generate_series(date_trunc('month', min(date)),
                        date_trunc('month', max(date)),
                        interval '1 month') as date
FROM fb_parsed WHERE business_id = 1 AND site = 'facebook') 
ym LEFT JOIN
     fb_parsed p
     ON EXTRACT(year FROM ym.date) = EXTRACT(year FROM p.date) AND
        EXTRACT(month FROM ym.date) = EXTRACT(month FROM p.date) AND
        p.business_id = 1 AND site = 'facebook'
GROUP BY year, month;

.animated {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.animated.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	text-align: center;
}
@-webkit-keyframes tada {
 from {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
 10%, 20% {
 -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
 30%, 50%, 70%, 90% {
 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
 40%, 60%, 80% {
 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}
}
 @keyframes tada {
 from {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
 10%, 20% {
 -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
 30%, 50%, 70%, 90% {
 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
 40%, 60%, 80% {
 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}
}
.tada {
	-webkit-animation-name: tada;
	animation-name: tada;
}
/********************************/
.ani-g{
	font-size: 36px;
	color: #66ccff;
}
.ani-en{
	color: #66ccff;
	position: relative;
	bottom: 8px;
	display: inline;
}
.ani-erate{
	color: #666666;
	position: relative;
	bottom: 8px;
	display: inline;
}

Answer 1

此动画需要块级元素。只需为您的display: inline-block;课程插入.animated，就可以了！

＆＃13;

＆＃13;

.animated {
  display: inline-block;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  text-align: center;
}
@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
/********************************/

.ani-g {
  font-size: 36px;
  color: #66ccff;
}
.ani-en {
  color: #66ccff;
  position: relative;
  bottom: 8px;
  display: inline;
}
.ani-erate {
  color: #666666;
  position: relative;
  bottom: 8px;
  display: inline;
}

＆＃13;

<span class="ani-g animated infinite tada">G</span><span class="ani-en">EN</span><span class="ani-erate">ERATE THIS</span>
<h1 class="n-bitwise animated infinite tada">G</h1>

＆＃13;

＆＃13;

＆＃13;