As I commented, one can’t animate auto (yet), so either use the max-width/max-height trick, or, if you need it to be more exact, set the width using a script. With the max-width/max-height trick, give it a value big enough to accommodate the widest. Stack snippet .myspan { display: inline-block; font-size: 30px; background-color: #ddd; vertical-align: bottom; …
The problem is that font weights, when represented numerically, must be a multiple of 100. To animate between 400 and 600, the font would change from 400 to 500 to 600 (3 ‘frames’, if you like) and wouldn’t look very smooth. An animation wouldn’t increment the weight by 1 each time (400, 401, 402…) it …
you can add a delay like this: transition: box-shadow 300ms, padding 300ms 400ms; The box-shadow transition will start on hover and last 300ms, and the padding will start after 400ms and again last 300ms. .something { background: blue; color: white; padding: 0px; background-clip: context-box; transition: box-shadow 300ms, padding 300ms 400ms; } .something:hover { box-shadow: 0px …
CSS Keyframes support is pretty good these days: .fade-in { opacity: 1; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 2s; } @keyframes fadeInOpacity { 0% { opacity: 0; } 100% { opacity: 1; } } <h1 class=”fade-in”>Fade Me Down Scotty</h1>
I got rid of the flickering. Add «-webkit-backface-visibility: hidden;» to the elements you are transitioning. Voilà!
A general answer for a general question… Transitions can’t animate properties that are auto. If you have a transition not working, check that the starting value of the property is explicitly set. Sometimes, you’ll want to animate height and width when the starting or finishing value is auto. (For example, to make a div collapse, …
It is fairly easy to achieve using Mari M’s background-color: inherit; technique in addition with -webkit-background-clip: text;. Live demo; https://jsfiddle.net/s10f04du/ @media screen and (-webkit-min-device-pixel-ratio:0) { .container { overflow-y: scroll; overflow-x: hidden; background-color: rgba(0,0,0,0); -webkit-background-clip: text; transition: background-color .8s; } .container:hover { background-color: rgba(0,0,0,0.18); } .container::-webkit-scrollbar-thumb { background-color: inherit; } }
Use the :active pseudo-class in your css, then add ontouchstart=”” and onmouseover=”” to the body tag. The following code is excerpted from my site, in which I have buttons that get smaller and glow white when hovered(on pcs) or held down(on touch devices) <style> .boxbutton:active{ -webkit-transform:scale(0.9); -moz-transform:scale(0.9); -ms-transform:scale(0.9); -o-transform:scale(0.9); transform:scale(0.9); -webkit-box-shadow:0px 0px 20px #FFF; -moz-box-shadow:0px …
You can set the transition-property to none. This way, no transition effect will be applied. Like this: -webkit-transition-property: none; -moz-transition-property: none; -o-transition-property: none; transition-property: none;
Add the vendor prefix in the transitions: p { -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); -webkit-transition: -webkit-transform 1s ease-in; /* Changed here */ -moz-transition: -moz-transform 1s ease-in; -o-transition: -o-transform 1s ease-in; transition: transform 1s ease-in; } a:hover + p { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); …