2

I have 2 pictures on this animation and I want to make 3rd picture on the spot when the previous two pictures merge. Two persons running toward each other and i want them to hug at the middle of screen. I hope I explained it well, since my English is bad. Here is my code. Thanks in advance!

<!DOCTYPE html>
<html>
    <head>
        <title>Animacija</title>
        
        <style>
            .from-left {
  position: absolute;
  left: -100px;
  animation: move-right 3s ease forwards;
}

.from-right {
  position: absolute;
  right: -100px;
  animation: move-left 3s ease forwards;
}

@keyframes move-right {
  100% {
    left: calc(50% - 50px);
  }
}

@keyframes move-left {
  100% {
    right: calc(50% - 50px);
  }
}
        </style>
    </head>
    
    <body>
        <div class="container">
  <img class="from-left" src="john.jpg">
  <img class="from-right" src="catana.jpg">
</div>
        
    
     
    </body>
</html>
Mistalis
  • 17,793
  • 13
  • 73
  • 97
Miloš Marković
  • 55
  • 4

1 Answers1

0

To do the effect you are trying to achieve, you will need some Javascript. You should do the following :

  • When the two pictures are colliding (which could be done by simply checking their position), hide them
  • Display the 3rd image in the middle of the screen

I hope that I understood well the kind of effects you are searching for.

I recommend you to check for those articles which could help you :

Louis 'LYRO' Dupont
  • 1,052
  • 4
  • 15
  • 35
  • Thank you very much! But any chance of giving me the full code of your solution? With random pictures. That would be awesome! – Miloš Marković Aug 10 '17 at 15:31
  • I am sorry, but StackOverflow is not a code writing service. I gave you a clear guide of what you should do, and honestly it's pretty easy. But you will learn a lot more if you try to do it by yourself instead of copying code other people did without even thinking about what this code is really doing. – Louis 'LYRO' Dupont Aug 11 '17 at 07:49