5
CSSアニメーションで回転テキストを追加しました。アニメーションを1サイクルにして最後のフレームでフリーズしたい。私の現在のコードでは、アニメーションは1サイクルを行い、空のフレームで終了します。これを修正する方法に関する提案はありますか？あなたは100％にキーフレームCSSアニメーション：最後のフレーム/ワードで停止する必要があります
body {} .rw-wrapper {
width: 80%;
position: relative;
margin: 110px auto 0 auto;
font-family: 'Bree Serif';
padding: 10px;
}
.rw-sentence {
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}
.rw-sentence span {
color: #444;
font-size: 200%;
font-weight: normal;
}
.rw-words {
display: inline;
text-indent: 10px;
}
.rw-words-1 span {
position: absolute;
opacity: 0;
overflow: hidden;
color: #6b969d;
-webkit-animation: rotateWord 8s 1 forwards;
-ms-animation: rotateWord 8s 1 forwards;
animation: rotateWord 8s 1 forwards;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
color: #6b889d;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
color: #6b739d;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #7a6b9d;
}
@-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-ms-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-ms-transform: translateY(-30px);
}
5% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 0;
-ms-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@media screen and (max-width: 768px) {
.rw-sentence {
font-size: 18px;
}
}
@media screen and (max-width: 320px) {
.rw-sentence {
font-size: 9px;
}
}<section class="rw-wrapper">
<h2 class="rw-sentence">
\t \t <span>Test</span>
\t \t <div class="rw-words rw-words-1">
\t \t \t <span>one</span>
\t \t \t <span>two</span>
\t \t \t <span>three</span>
\t \t \t <span>four</span>
\t \t </div>
\t </h2>
</section>
はあなたにShomzをありがとう！それはすべて今働いている。 – victor
あなたは大歓迎です！ Btw。私はカスタムIDを使って簡単に違いを見ることができますが、元のようにn番目の子供を使って同じ結果を得ることができます。最後の要素に他のアニメーションを割り当てるようにしてください。 – Shomz