CSS animation and JS onclick

[Gunix]

Γεια σας φίλοι μου.

Θα ήθελα την βοήθεια σας παρακαλώ σχετικά με την JS.

Έχω μια πρόταση πχ "Web Developer" και 3 εικονες.

Η πρώτη εικόνα (test1) αριστερα και η τρίτη (test2) εικόνα δεξια θα είναι σταθερές.

Στην δεύτερη εικόνα (test3) μεσαία θελω να κάνω animation.

Θέλω το εξής να κάνω. Πρώτον, οι τρεις εικόνες θα έχουν opacity 0. Δεύτερον, όταν ο χρήστης κάνει κλικ στην πρόταση τότες θα ακούσει την πρόταση και η πρώτη εικονα θα γίνεται opacity 1 και μετά από 2 δευτερολεπτα να γίνονται οι άλλες εικόνες 2 opacity 1 και η δεύτερη εικόνα να κάνει animation προς τα δεξια για να πάει απάνω στην εικόνα τρίτη.

Έχω κάνει την CSS αλλά έχω κολησει στην JS. Μπορείτε παρακαλώ να με βοηθήσετε? Λόγο που δεν την ξέρω πολύ καλά.

.test1image{

  max-width: 10%;

  margin: 4% 0 3% 30%;

}

.test2image{

  max-width: 15%;

  margin: 8% 0 3% 20%;

}



/*// Star: Element to animate //*/



.test3image{

  max-width: 15%;

  margin: 2% 0 3% -36%;

  animation-name: test3motion;

  animation-duration: 3s;

  animation-fill-mode: forwards;

  animation-delay: 0.5s;

}



/*// Keyframes //*/

@keyframes test3motion{

  from{ transform: translateX(20px)}

  to{ transform: translateX(230px)}

}





.sntc-img {

    height: auto;

    opacity: 0;

    -webkit-transition: opacity 0.5s ease-in;

    -moz-transition: opacity 0.5s ease-in;

    -o-transition: opacity 0.5s ease-in;

    z-index: 1;

}

.sntc-img--show {

    position: relative;

    opacity: 1;

    z-index: 99;

}

<audio id="sntc-audio">

    <source src="../../fsound/fs1/s1/sntc.mp3" type="audio/mpeg">

      Your browser does not support the audio element.

    </audio>

    

    <div class="container">

    <h1 style="text-align: center;">

      <span class="sntc">Web Developer</span>

    </h1>

    <style>

    .sntc:hover {

      text-decoration: underline;

      cursor: pointer;

    }

    </style>

    <img class="test1image " src="../../fimages/images/test1.png" alt="test1 Image">

    <img class="test2image " src="../../fimages/images/test2.png" alt="test2 Image">

    <img class="test3image " src="../../fimages/images/test3.png" alt="test3 Image">

    </div>

[lion2486]

Υπάρχουν διάφορες προσεγγίσεις. Μια απλή θα ήταν με την javascript να αναθέτεις δυναμικά class στα elemens που θες (λογικά με κάποιο setTimeout()), αλλιώς θα μπορούσες να βάλεις την js να κάνει αυτό που θές αλλάζοντας δυναμικά (και ίσως συνεχές) τις ιδιότητες css (δεν το προτείνω και πολύ αλλά ίσως σου δίνει καλύτερη ευελιξία).

[dominotrix]

http://codepen.io/dominotrix/pen/jBRdbv