To fix this issue I'm trying to get a nice transition effect for my search bar, however every transition starts and ends from a 0px width state for some reason. Does anyone know what could cause this? Thank you. , #searchBox didn't mentioned its width. Try the code below
-webkit-transition: width 0.30s linear 0s;
-moz-transition: width 0.30s linear 0s;
-ms-transition: width 0.30s linear 0s;
-o-transition: width 0.30s linear 0s;
transition: width 0.30s linear 0s;
seems to work fine You could try the following. Basically just set the margin-left on min-width: 768px to -180px and use padding-left to move the nav back to its original position. Since you are only transitioning margin-left change transition: all 0.3s ease-in-out; to transition: margin-left 0.3s ease-in-out;.
Does that help I have a site where I have selections boxes divs, when a user clicks on those boxes it reveals a hidden content div and also replaces the background images of the selection box div to a tick. This all works work fine, but if someone clicks fast or clicks in different areas of the selection box div, the background image of the selection box div might show the tick even the the content div is hidden again. I have tried various methods from googling but most seem to relate to a delay on mobile devices. If any one has any ideas, please let me know, also I know my code is probably not the cleanest. The background images are 24kb in size each, could that be it? My code is below: , please review this one: