Javascript html5单词交换动画

我想用一系列单词来替换“这个网站很酷”中的形容词

[很棒，有趣，有用，漂亮]

。我不想只在一帧中交换它，我也想有一个漂亮的过渡。也许新单词可以从顶部滑入，也可以缩小并替换旧单词。我如何实现它？Javascript？CSS3？谢谢。

您可以使用类似fadeIn的jQuery效果

HTML:

---

你试过什么？网上有很多关于这个主题的教程。我在谷歌上搜索了半个小时，没能找到：（糟糕的谷歌搜索技能？谢谢！我想我需要先隐藏元素，然后再隐藏fadeIn。但我想到了这个主意。也许使用动画顶部偏移量会使它完全符合我的要求。仍然希望有一个纯CSS3或像impress.js那样的放大/缩小实现，但我想这对于一个小技巧来说太难了。

<div>This site is <div id="adjDiv" style="display:none"></div>.</div>

var adjPool = ["awesome", "fun", "useful", "beautiful"];
var adj = adjPool[Math.round(Math.random() * (adj.length-1))];
$("#adjDiv").text(adj);
$("#adjDiv").fadeIn();