Home/ Questions/Q 8535533
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T10:27:13+00:00

I want to implement some animation in CSS3 which has an effect like its

  • 0

I want to implement some animation in CSS3 which has an effect like its been coded in flash.
I was looking for some effect which looks like the opening credits of a movie, when the credits keep getting displayed at various positions of the screen while the movie is playing in the background. Only thing instead of using a movie here I want to use images.
Looking for something like this: Madmanimation

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A really simple example I just did.

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

    This one uses four elements (displayed one on top of the other) which have their opacity animated (you fade in the element you want to appear by changing its opacity from 0 to 1 and you fade out the one you want to hide by changing its opacity from 1 to 0), but there are numerous other options, like animating a scale transform (you scale to 0 the element you want to disappear, and from 0 to 1 the element you want to appear) or animating top/ right/ bottom/ left values to move the elements on and offscreen.

    Also, you could have just one element with multiple backgrounds and then animate their background-size or background-position (that’s strictly for switching the images, you’d have to synchronize the changing text with the changing images… or leave them unsynchronized for a more chaotic effect).

    • 0