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
Post a Comment