Why is home screen web app different from the one opened in Safari in iOS8?

So I am building a small web-app for my iPhone5 iOS8 (for the first time) and when I open it in Safari it works correctly, but when I save it to Home Screen my CSS animations freeze while my fingers touch the screen, also it scales to double size

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <link rel="apple-touch-icon" href="img/icons/icon120.png">
  <link rel="apple-touch-icon" sizes="76x76" href="img/icons/icon76.png">
  <link rel="apple-touch-icon" sizes="120x120" href="img/icons/icon120.png">
  <link rel="apple-touch-icon" sizes="152x152" href="img/icons/icon152.png">

I use these settings. And here is my "animation".

.theme{
  width:100%;
  height:100%;
  text-align: center;
  border-bottom: 5px black solid;
  background-color: #FFF;
  transition: background-color 0.7s ease-in;
  -ms-transition: background-color 0.7s ease-in;
  -moz-transition: background-color 0.7s ease-in;
  -webkit-transition: background-color 0.7s ease-in;
  -webkit-transform: translate3d(0,0,0);
}
.active{
  background-color: #9AF;
  transition: background-color 0.4s ease-in;
  -ms-transition: background-color 0.4s ease-in;
  -moz-transition: background-color 0.4s ease-in;
  -webkit-transition: background-color 0.4s ease-in;
  -webkit-transform: translate3d(0,0,0);
}

I add active class to theme classes with javascript.