【CSS】如何用CSS实现向右飞入的功能

说实话一直对CSS了解不深，日常只是用CSS调整个margin啦位置啦，有什么动态效果都用JS做。这次有个项目要更换模板，其中一个元素向右飞入页面（非匀速），平滑地停在页面中心的小动画很喜欢，但新模板里没有，就想研究一下人家是怎么做的。

首先找到控制它的class，是这样写的：

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
}

animation-name 属性为 @keyframes 动画规定名称。  -webkit代表chrome。

查了一下，各大浏览器都不支持@keyframes，不过有浏览器支持对应的替代规则：

目前浏览器都不支持 @keyframes 规则。

Firefox 支持替代的 @-moz-keyframes 规则。

Opera 支持替代的 @-o-keyframes 规则。

Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

那么fadeInRightBig的规则都是怎么写的呢？

@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px);
    }

    100% {
        opac