In order to slide the background color up you would need to use a background image, or a gradient of some sort, while gradually adjusting the background-position: .box { width: 200px; height: 100px; background-size: 100% 200%; background-image: linear-gradient(to bottom, red 50%, black 50%); -webkit-transition: background-position 1s; -moz-transition: background-position 1s; transition: background-position 1s; } .box:hover { … Read more
You can just use visibility without using display: .top-nav li ul.drop-down { list-style-type: none; position: absolute; top: 32px; left: -40px; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } .top-nav li:hover ul.drop-down { visibility: visible; opacity: 1; } Demo.
No, you can’t animate the position property. There are only a number of css properties you can animate, and most of them have numbers or colors as values (With some exceptions). You can see this list in the w3c css transitions especification. Anyway, since you can animate top and left properties, you could change your … Read more
after is not a valid value of transition. Instead put transition as a property of the :after selector. div:after { content: ” – positive!”; position: relative; opacity: 0; top: -20px; -webkit-transition: all 3s; transition: all 3s; } div:hover:after { opacity: 1; top: 0px; } <div>Test</div> You can also have a different transition on the hover … Read more
You need to use transitions on .class and not .class:hover div { height: 200px; width: 200px; box-shadow: 0; transition: box-shadow 1s; border: 1px solid #eee; } div:hover { box-shadow: 0 0 3px #515151; ; } <div></div>
Using a different approach you’ll get a slightly different effect. You can play with the times of the setTimeout and the transition to modify the behavior. See the fiddle + function() { var to; $(“.wrap”).on(‘mouseenter’, function() { var circles = $(this).children(); var degree = (2 * Math.PI) / circles.length; //calc delta angle var transforms = … Read more
I think using a background gradient with a hard transition is a very clean solution: .diagonal-split-background{ background-color: #013A6B; background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%); }
Bootstrap accomplishes the transition animation of the responsive nav bar the same way it does any collapse, which is using a CSS3 transition. To turn off the transition for only the navbar (leaving any other transitions in place), you simply have to override the CSS. I’d suggest adding a class, such as no-transition (but the … Read more
There are many properties that can’t be transitioned. overflow is among them; the render engine has no idea how to transition between “hidden” and “shown”, because those are binary options, not intervals. This is the same reason why you can’t transition between display: none; and display: block; (for example): there are no in-between phases to … Read more
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 … Read more