CSS transition making page too wide -


i trying make box slide in left of page while in viewport, it's making page wide , can't reverse once out of viewport once i've scrolled past it. have:

.box {  background: #2db34a;  border-radius: 6px;  cursor: pointer;  height: 95px;  line-height: 95px;  text-align: center;  transition-property: background;  transition-duration: 1s;  transition-timing-function: linear;  width: 95px;  margin-top: 500px;  }   #slide { position: absolute; right: -100px; width: 100px; height: 100px; background: blue; overflow: hidden; animation: slide 0.5s forwards; animation-delay: 1s -webkit-animation: movetoright .6s ease both; animation: movetoright .6s ease both; -webkit-animation: movefromright .6s ease both; animation: movefromright .6s ease both;  }  @-webkit-keyframes movetoright {   { }  { -webkit-transform: translatex(100%); }  } @keyframes movetoright {    { }  { -webkit-transform: translatex(100%); transform: translatex(100%); }  }  @-webkit-keyframes movefromright {  { -webkit-transform: translatex(100%); }   } @keyframes movefromright {  { -webkit-transform: translatex(100%); transform: translatex(100%); } }  </style>  </head>   <body>  <div id="slide" class="box">box</div>  </body> </html> 

i can't use plug-ins either.


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -

How to provide Authorization & Authentication using Asp.net, C#? -