CSS3 キーフレームが勢いを増し始めたばかりの Web サイトでこのタイプのアニメーションを見たことがありますが、それを見つけることができず、CSS や jQuery を使用して複製することもできませんでした。
達成したいことをアニメーション化し、以下に埋め込みました。これは、新しい CSS3 キーフレームまたは jQuery の .animate(); を使用してコーディングできると思います。特徴。知らない。知っていることはすべて試しましたが、すべて無駄でした。
これが私が欲しかったもののGIFアニメーションです：
http://droplr.com/はホームページで非常によく似たトランジションを使用していますが、いくつかのスライド効果があります。そして、出てくるデータ (単語) は常にすべてランダムです。それがどのように可能か知りたいです！
純粋なcssで可能な解決策!
@-webkit-keyframes fade-in{
from{
opacity:1;
top:0px;
}
to{
opacity:0;
top:-5px;
}
}
.text-animated-one{
display:inline;
position:relative;
top:0px;
-webkit-animation:fade-in 1s infinite;
}
.text-animated-two{
opacity:0;
display:inline;
position:relative;
margin-left:-56px;
-webkit-animation:fade-in 1s infinite;
-webkit-animation-delay:0.5s;
}
.aggettivi{
display:inline;
width:100px;
height:100px;
}
いくつかの大規模な Google 検索と実験により、私は自分自身の質問に答えることができるようになりました。
その方法を知りたい場合は、私が書いたこの CodePen スニペットをチェックしてください: http://codepen.io/AmruthPillai/pen/axvqB
このようなもの：
HTML
<p>I am <span>Something</span><span class="hidden">Test22222</span></p>
CSS
.hidden {display:none;}
span { position: absolute; left:45px; top:10px;}
p {width:200px; border:1px solid #000; padding:10px; position:relative;}
jQuery
$(document).ready(function() {
// run the fade() function every 2 seconds
setInterval(function(){
fade();
},2000);
// toggle between fadeIn and fadeOut with 0.3s fade duration.
function fade(){
$("span").fadeToggle(300);
}
});
注: これは 2 つの単語の切り替えでのみ機能します。単語の配列を用意し、それらをループして `fadeIn/fadeOut アニメーションを適用する関数を作成する方がよい場合があります。
編集：これは複数の単語の解決策です - https://stackoverflow.com/a/2772278/2470724を使用しarrayて各単語を保存し、それらをループします。
編集2：非配列ソリューション：http://jsfiddle.net/kMBMp/このバージョンは、その上にun-ordered listあるをループしますdisplay:none
最も簡単なアプローチは、おそらく Morphext jQuery プラグインを使用することです。
https://github.com/MrSaints/Morphext
animate.css を利用しているため、テキストのアニメーション スタイルを簡単に変更できます。
もう少し強力なもの (in AND out アニメーションを指定できます。テキストだけでなくアニメーション化することもできます) を探している場合は、Morphist と呼ばれるスピンオフがあります。