Jquery 使用CSS3的Flash动画效果

我想在CSS3中实现一些动画，其效果类似于在flash中编码的动画。 我在寻找一种效果，它看起来像电影的开场白，当电影在背景中播放时，画面的各个位置都会显示这些画面。唯一的事情，而不是在这里使用电影，我想使用图像。

---

寻找类似这样的内容：

您需要使用关键帧和变换查看CSS3动画。

我就是这么做的

HTML:

这一个使用四个元素（一个在另一个之上显示），它们的不透明度设置了动画（通过将

不透明度从0更改为1，可以淡入要显示的元素，通过将
不透明度从1更改为0，可以淡出要隐藏的元素），但还有许多其他选项，类似于设置
缩放变换的动画（将要消失的元素缩放为0，将要显示的元素从0缩放为1）或设置
顶部
/
右侧
/
底部
/
左侧
值的动画，以在屏幕上和屏幕外移动元素

此外，您可以只使用一个具有多个背景的元素，然后设置其
背景大小
或
背景位置
的动画（这严格用于切换图像，您必须将更改的文本与更改的图像同步…或使其不同步，以获得更混乱的效果）.
尝试按照上面给出的网站代码进行操作，想学习如何以我自己的风格在图像中设置动画。也许我应该更清楚：向我们展示你所做的尝试。给你：我在看一些教程，帮助我使用CSS3设置图像动画，使它们看起来像电影。并且在图像转换时显示一些文本。关键帧动画可以完成所有这些。
<h1>That's all!</h1>
<div class='bg'><h3>Pencil Nebula</h3></div>
<div class='bg'><h3>N44 in the Large Magellanic Cloud</h3></div>
<div class='bg'><h3>Messier 83: Central Region</h3></div>
<div class='bg'><h3>Dark Matter</h3></div>

h1 {
    margin-top: 7em;
    color: transparent;
    text-align: center;
    animation: endani 1s 17s forwards;
}
.bg, h3 { position: absolute; }
.bg {
    top: 0; right: 0; bottom: 0; left: 0;
    background-position: 50% 50%;
    background-size: cover;
    opacity: 0;
}
.bg:first-of-type {
    background-image: 
        url(http://i.space.com/images/i/21536/wW4/pencil-nebula-wide-1920.jpg);
    animation: bgani 5s;
}
.bg:nth-of-type(2) {
    background-image: 
        url(http://i.space.com/images/i/20755/wW4/N44-Large-Magellanic-Cloud.jpg);
    animation: bgani 5s 4s;
}
.bg:nth-of-type(3) {
    background-image: 
        url(http://i.space.com/images/i/20683/wW4/eso-messier-83.jpg);
    animation: bgani 5s 8s;
}
.bg:nth-of-type(4) {
    background-image: 
        url(http://i.space.com/images/i/15679/wW4/hubble-cluster-abell-520.jpg);
    animation: bgani 5s 12s;
}
h3 {
    padding: .2em .8em;
    background: rgba(0,0,0,.65);
    color: white;
}
.bg:first-of-type h3 { top: 25%; left: 15%; }
.bg:nth-of-type(2) h3 { bottom: 25%; right: 15%; }
.bg:nth-of-type(3) h3 { top: 25%; right: 15%; }
.bg:nth-of-type(4) h3 { bottom: 25%; left: 15%; }

@keyframes bgani { 
    0% { opacity: 0; } 20% { opacity: 1; }
    95% { opacity: 1; } 100% { opacity: 0 }
}

@keyframes endani { to { color: crimson; text-shadow: 0 0 2px white; } }