CSS animation and JS onclick

[alexitiris 3]

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

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

Έχω μια πρόταση πχ "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;
}

 

Edited April 5, 2017 by alexitiris

[domino 8]

Δοκιμασες με jQuery να το κανεις; 

Μετα το κλικ, υπαρχει 1s καθυστερηση, επειτα εμφανιζεται η πρωτη εικονα, μετα υπαρχει ακομα 1s καθυστερηση (συνολο 2s απο το κλικ) και εμφανιζονται οι αλλες 2 εικονες. Μολις τελειωσει το fade-in των εικονων, τρεχει το animation της 2ης εικονας που καθεται πανω στην 3η.

Edited April 5, 2017 by domino