Menu
I am missing something obvious. But the transition on only one element isn't working here.
Here's my code.
#navigatore-servizi ul li a { color: #fff; text-decoration: none; text-shadow: 0 -1px 0 #008; display:block; width:240px; height:96px; background:#000; background-position: top center; line-height: 96px; font-family: sans-serif; text-transform: uppercase; text-align: center; -webkit-transition: -moz-transform .3s ease-out; -moz-transition: -webkit-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out; } #navigatore-servizi ul li a:hover { background-position: bottom center; -moz-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); border-right: 10px solid #b00; } 
796
So, what's the difference between CSS Transform and CSS Transition? The Transform property in CSS moves or modifies the appearance of an element, whereas the Transition property seamlessly and gently transitions the element from one state to another.
CSS syntax example for scale Don't forget to add a transition! Without applying transition, the element would abruptly change sizes. Add the transition to the parent selector (not the hover selector). To make the transition smooth on both hover-over/hover-off.
The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a <transform-function> data type.
CSS transitions allows you to change property values smoothly, over a given duration. Mouse over the element below to see a CSS transition effect:
When the state of an element is changed, it's pretty cool to have a visual effect to show that an action occurred. Thanks to CSS transitions, we have a wide range of transition effects that can be used on our HTML elements. The height of an element is one CSS property that often needs to be transitioned.
That is, when a button is clicked, the height of an element increases or decreases. See more buttons and bootstrap panels make use of this technique. Transition effects come with some frameworks like Bootstrap and JQuery. Yet, CSS transitions give you a whole lot of flexibility in transitioning the height.
The height of an element is one CSS property that often needs to be transitioned. Sometimes, we want a part of an element to be collapsed until it is needed. That is, when a button is clicked, the height of an element increases or decreases. See more buttons and bootstrap panels make use of this technique.
You've got your
-webkit-transition: -moz-transform .3s ease-out; -moz-transition: -webkit-transform .3s ease-out; switched. I have to assume that's the problem.
90
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
