html - CSS Transition Making Weird Effects? -
I'm trying to create something similar to a bootstrap input. When the user clicks on the input then it will play a good transition and shine. I have got all the styling down but the transition looks strange, but all the other sites are keeping an eye on it correctly. My box shadow looks very fast, then dims, but everything works right here It is doing, but here CSS Input By im using the latest version of Google Chrome It has something to do with insulating your original box shadow to make the browser an inset and non-inset box - There is a problem in transition between the shadow and does not try to do this though there is a simple fix - Add the original box shadow back to the focused style: It keeps the box-shadow you already have (which was overwritten / replaced with your focus box-shadow) and adds to the new box-shadow focus, while clicking in the box Correct and Fade Fade. http://67.184.73.19/Website/Login/ is animating it differently from its first link. I have some code.
.field {-webkit-transition: all 0.30s easy-out; -MOZ-Transition: all 0.30 seconds less-in-out; -MMS transition: all 0.30s ease-in-out; -O-Infection: less than 0.30 seconds-in-out; Minute-height: 34px; Padding: 7px 8px; Profile: None; Color: # 333; Background color: #fff; Background repeat: do not repeat; Background-position: right center; Limit: 1px solid # ccc; Border-radius: 3px; Box-shadow: Inset 0 1px 2px RGBA (0,0,0,0,0,0.075); -moz box-size: border box; Box-Size: Boundary Box; Vertical-align: medium; } .field: Focus {box-shadow: 0 10 10x5 RGBA (0, 153, 255, .75); Border: 1 px solid # 09F; }
.field: Focus (box-shadow: inset 0 1px 2px rgba (0,0,0,0,0,0.075), 0 10px RGBA (0,153,255, .75); range: 1px solid # 09F; }
Comments
Post a Comment