Effet d'animation Flash utilisant CSS3

Question

Je veux implémenter une animation en CSS3 qui a un effet comme son codé en flash. Je cherchais un effet qui ressemble au générique d'ouverture d'un film, quand les crédits continuent à s'afficher à différentes positions de l'écran pendant que le film joue en arrière-plan. La seule chose au lieu d'utiliser un film ici, je veux utiliser des images. Vous cherchez quelque chose comme: Madmanimation

Answer 1

A really simple example Je viens de le faire.

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

Celui-ci utilise quatre éléments (affichés l'un sur l'autre) qui ont leur opacité animée (vous fanent dans l'élément que vous voulez apparaît en changeant opacity de 0 à 1 et vous perdez celui que vous voulez cacher en changeant opacity de 1 à 0), mais il existe de nombreuses autres options, comme l'animation d'une transformation scale (vous mettez à l'échelle 0 l'élément que vous voulez pour disparaître, et de 0 à 1 l'élément que vous voulez voir apparaître) ou animer top/right/bottom/left valeurs pour déplacer les éléments sur et hors écran.

De même, vous ne pouvez avoir qu'un seul élément avec plusieurs arrière-plans et ensuite animer leur background-size ou background-position (uniquement pour basculer les images, vous devez synchroniser le texte changeant avec les images changeantes ... ou les laisser désynchronisées pour un effet plus chaotique).

Answer 2

Vous devez regarder dans les animations CSS3 en utilisant des images clés et des transformations. Start here