使用CSS3的Flash动画效果

Question

我想在CSS3中实现一些动画，它的效果就像在flash中编码的一样。我在寻找一些看起来像电影片头字幕的效果，当电影在背景中播放时，字幕不断显示在屏幕的不同位置。唯一的事情，而不是在这里使用电影，我想使用图像。正在寻找这样的东西：Madmanimation

Answer 1

我刚刚做了一个非常简单的例子。

HTML:

<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>

CSS：

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; } }

这一个使用了四个元素（显示在另一个元素的顶部），它们的不透明度已设置动画（通过将其opacity从0更改为1来淡入要显示的元素，通过将其opacity从1更改为0来淡出要隐藏的元素），但还有许多其他选项，类似于为scale变换设置动画（将要消失的元素缩放到0，将要出现的元素从0缩放到1）或为top/right/bottom/left值设置动画以在屏幕上和屏幕外移动元素。

此外，您可以只使用一个具有多个背景的元素，然后为它们的background-size或background-position设置动画（这严格用于切换图像，您必须将不断变化的文本与不断变化的图像同步……或者使它们不同步以获得更混乱的效果）。

Answer 2

您需要使用关键帧和变换来查看CSS3动画。从这里开始