javascript - I am having problems with a transition effect that I am doing on a website? -

I am trying to make an impression that when I scroll out 600 px out of two pictures, then they Grow, close together. But when I do this there is no effect.

html:

  & lt; Section id = "services" class = "services-section" & gt; & Lt; Div class = "container" & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-lg-12" & gt; & Lt; Div class = "container12" id = "scroll" & gt; & Lt; Img src = "img / phone.jpg" id = "phone" & gt; & Lt; Img src = "img / middle.jpg" id = "medium" & gt; & Lt; Img src = "img / tablet.jpg" id = "tablet" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Section & gt;  

CSS:

  #scroll {margin-top: 200px; Margin-down: 200px; Text align: center; } #scroll img {status: relative; }. Value (transition: 2s ease-in-out; -Mozy-infected: 2S easy-in-out; Webkit-Infection: 2s ease-in-out; } # Function .animate {conversion: translations (5em, 0); -Mozy-transition: Translation (5 AM, 0); -webkit-infection (5em, 0); } #tablet .animate {conversion: translations (-10em, 0); -Mozy-transition: Translation (-10 M, 0); -webkit-transition (-10em, 0); } # Function .animate {conversion: translations (5em, 0); -Mozy-transition: Translation (5 AM, 0); -webkit-infection (5em, 0); } #tablet .animate {conversion: translations (-10em, 0); -Mozy-transition: Translation (-10 M, 0); -webkit-transition (-10em, 0); } $ {Document} .ready (function () {$ (window) .scroll (function (event) {var y = $ (This) .scrollTop (); if (y> = 400) {$ ('# Phone'). AddClass ('Chetan'); $ ('# tablet') AddClass ('Anime');} });});  

If you can help me on this, I would be very happy. thanks for helping me.

It looks like your code is #phone and #tablet element However, your CSS has been written to handle child elements with .animate classes. Your CSS should be written as:

  # phone.animate {conversion: translations (5em, 0); -Mozy-transition: Translation (5 AM, 0); -webkit-infection (5em, 0); } # Tablet.animate {transform: translate (-10em, 0); -Mozy-transition: Translation (-10 M, 0); -webkit-transition (-10em, 0); } # Phone.animate {conversion: translations (5em, 0); -Mozy-transition: Translation (5 AM, 0); -webkit-infection (5em, 0); } # Tablet.animate {transform: translate (-10em, 0); -Mozy-transition: Translation (-10 M, 0); -webkit-transition (-10em, 0); }