を使用して文のすべての単語私はフェードは右CSS
図Bのようにここでは、最終的なCSSにのみアニメーション効果を実現したいが、私のコードです: http://codepen.io/catch_up/pen/bpqexg?editors=1100HTML
<div class='programming my-anim-parent'>
<span class='my-anim'>Hello!</span>
<span class='my-anim'>How</span></span>
<span class='my-anim'>Are</span></span>
<span class='my-anim'>You </span></span>
<span class='my-anim'>People.</span>
<span class='my-anim'>I</span>
<span class='my-anim'>Learn</span>
</div>
CSS
.programming {
font-size: 48px;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
white-space: nowrap;
}
.programming span:nth-of-type(1) {
animation-delay: 0.3s;
}
.programming span:nth-of-type(2) {
animation-delay: 0.6s;
}
.programming span:nth-of-type(3) {
animation-delay: 0.9s;
}
.programming span:nth-of-type(4) {
animation-delay: 1.2s;
}
.programming span:nth-of-type(5) {
animation-delay: 1.5s;
}
.programming span:nth-of-type(6) {
animation-delay: 1.8s;
}
.programming span:nth-of-type(7) {
animation-delay: 2.1s;
}
.my-anim-parent {
animation: L2RslideBounce 2.9s ease-in-out;
visibility: visible !important;
}
.my-anim {
animation: L2RAppear 2s, fadeIn 0.8s linear backwards;
visibility: visible !important;
}
/*FOR BOUNCING SENTENCE */
@keyframes L2RslideBounce {
0% {
transform: translate(-60%,-50%);
}
50%{
transform: translate(-40%,-50%);
}
100% {
transform: translate(-50%,-50%);
}
}
/*I think this is not working properly! Words are fading in all at once not from left to right. Can also be checked by putting long word.*/
/*EACH WORD SHOULD APPEAR LEFT TO RIGHT*/
@keyframes L2RAppear {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
/*FADING IN*/
@keyframes fadeIn {
0% {
opacity: 0.0;
}
100% {
opacity: 1;
}
}
2つのものの重ね合わせ:
1)各単語の左から右にフェードインします。
2)文全体の左から右にバウンスします。
第2回はうまくいきますが、第1のものでは、一言で言えばフェードが起こっています。これを修正する方法。コードは書かれていますが、動作しません。これを修正するには?
あなたがDIYを気にかけていないなら、このプラグインをチェックしてください - https://jschr.github.io/textillate/ – Tasos
こんにちは、あなたが与えたリンクで、私は "fadeInLeft(sequence)アニメーションで "。しかし私の場合は避けることができると感じる個々の手紙にアニメーションを適用しています。とにかく感謝:)以前、私はリンクを使用してそれをしようとしました.. http://stackoverflow.com/questions/12686738/css-fade-left-to-right。それはうまくいったが、なぜ私のコードがうまくいかなかったのかを知りたかった。 – myDoggyWritesCode
probs、私はあなたのコードを調べるために、なぜ私はそのプラグインについて覚えていない。 – Tasos