CSS transition property not functioning as expected
I am trying to add different transitions for the different properties, but the transition seems to not be working, as I expected.
Here is my CSS code
* {
transition: all .5s ease-in-out;
transition: opacity 80ms linear;
transition: background .2s ease-out;
}
I am probably doing something really obvious wrong, but if you can help, I do appreciate it. Thanks in advance!
Declaring the same CSS property multiple times will result in previous declarations being overwritten, and only the last being kept. (Assuming they have identical specificity).
You can comma-separate transitions like so:
transition: all .5s ease-in-out, opacity 80ms linear, background .2s ease-out;
Demonstration:
* {
transition: all .5s ease-in-out, opacity 2s linear, background 4s ease-out;
}
div {
padding: 100px;
background-color: red;
color: white;
opacity: 0.4;
}
div:hover {
font-size: 20px;
opacity: 1;
background-color: blue;
}
<div>hover this</div>
This question already has answers here:
How can I transition height: 0; to height: auto; using CSS?
(41 answers)
Closed 8 years ago.
I made a css transition which is from height auto to height: 75%.
CSS-Transition:
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
But its not working in IE and Firefox. I found some posts on google, but couldnt find a solution.
Thanks four your help.
To work with % and auto you can try with min-height like this:
div {
-webkit-transition: height 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
div:hover {
min-height:75%;
}
Check this Demo Fiddle
Tested in Chrome 31 -- Firefox 26
Try this: transition example
CSS:
.tran{
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
height: 100px;
background: #e5e5e5;
height: 100%;
}
.tran:hover{
height: 300px;
}
HTML:
<div style="height: 200px;">
<div class="tran">
Example
</div>
</div>
Simple, change from height to min-height or max-height, what ever will better for your needs.
Example:Fiddle
.mark.studio{
background: url(../images/studio_icon.png) no-repeat;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
height: 50px;
width: 50px;
z-index:103 !important;
}
.mark.studio:hover{
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
background: url(../images/studio_icon-hover.png) no-repeat;
z-index:103 !important;
}
With this css on hover the image morphs from the original image to the hover image giving a really cool effect, in firefox and IE9 I just get a hover image replacement. I put the -webkit-transition in both selectors but i'm pretty sure it only needs to be in
.mark.studio
Specify the unprefixed version of transition; Firefox and Internet Explorer dropped the prefixes. (Note that it’s Internet Explorer 10; IE9 doesn’t support transition.)
.mark.studio {
background: url(../images/studio_icon.png) no-repeat;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
height: 50px;
width: 50px;
z-index: 103 !important;
}
.mark.studio:hover {
background-image: url(../images/studio_icon-hover.png);
}
I took the liberty of taking z-index and transition off the :hover state; it’s pointless to add them again. (Unless you have another z-index with !important that overrides it, which would be a really bad design.)
Internet Explorer 9 doesn't support the -ms-transition tag, it only works properly on Internet Explorer 10 and up. IE10 supports both.
I'm trying to user css3 transitions to fade the opacity of an element (http://www.w3schools.com/cssref/css3_pr_transition-duration.asp).
For instance, I say:
-webkit-transition: opacity 2s ease-in-out;
Is there a way to specify a different "return to original state" time than the 2s?
I'd like to low the opacity in 2 seconds, but bring it back up in 0.5 seconds.
CSS3 Transition: Different transition for *IN* and *OUT* (or returning from transitioned state) seems to accomplish this but using multiple elements. Any better way?
Yes, there is a better way - http://jsfiddle.net/bJKpu/
Just specify different transition-duration-s for normal and hovered state:
div {
height: 200px;
width: 200px;
background: orange;
opacity: .5;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
}
div:hover {
opacity: 1;
height: 300px;
width: 300px;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
}
I can't seem to find the correct syntax for the CSS transition shorthand with multiple properties. This doesn't do anything:
.element {
-webkit-transition: height .5s, opacity .5s .5s;
-moz-transition: height .5s, opacity .5s .5s;
-ms-transition: height .5s, opacity .5s .5s;
transition: height .5s, opacity .5s .5s;
height: 0;
opacity: 0;
overflow: 0;
}
.element.show {
height: 200px;
opacity: 1;
}
I add the show class with javascript. The element becomes higher and visible, it just doesn't transition. Testing in latest Chrome, FF and Safari.
What am I doing wrong?
EDIT: Just to be clear, I'm looking for the shorthand version to scale my CSS down. It's bloated enough with all the vendor prefixes. Also expanded the example code.
Syntax:
transition: <property> || <duration> || <timing-function> || <delay> [, ...];
Note that the duration must come before the delay, if the latter is specified.
Individual transitions combined in shorthand declarations:
-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
Or just transition them all:
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
Here is a straightforward example. Here is another one with the delay property.
Edit: previously listed here were the compatibilities and known issues regarding transition. Removed for readability.
Bottom-line: just use it. The nature of this property is non-breaking for all applications and compatibility is now well above 94% globally.
If you still want to be sure, refer to http://caniuse.com/css-transitions
If you have several specific properties that you want to transition in the same way (because you also have some properties you specifically don't want to transition, say opacity), another option is to do something like this (prefixes omitted for brevity):
.myclass {
transition: all 200ms ease;
transition-property: box-shadow, height, width, background, font-size;
}
The second declaration overrides the all in the shorthand declaration above it and makes for (occasionally) more concise code.
/* prefixes omitted for brevity */
.box {
height: 100px;
width: 100px;
background: red;
box-shadow: red 0 0 5px 1px;
transition: all 500ms ease;
/*note: not transitioning width */
transition-property: height, background, box-shadow;
}
.box:hover {
height: 50px;
width: 50px;
box-shadow: blue 0 0 10px 3px;
background: blue;
}
<p>Hover box for demo</p>
<div class="box"></div>
Demo
I made it work with this:
.element {
transition: height 3s ease-out, width 5s ease-in;
}
One important thing to note is that the CSS transition property itself is a shorthand - as mentioned in the MDN Web Docs :
The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.
The ideal use of this shorthand is to combine the various Constituent properties of a single transition. If this is used to combine multiple transitions, it will start to get clunky.
So when you have more than 2 transitions on the same element which different constituent properties, it becomes easier to write them individually instead of using the transition shorthand. For example:
This is the shorthand version(Option 1) of multiple transitions on one element:
transition: transform 0.5s ease-in-out, box-shadow 0.2s ease-out, filter 0.1s ease-out, color 0.25s ease-in 0.2s;
As you can see, this gets clunky and a little bit harder to visualize.
The same CSS can be applied like this(Option 2):
transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s, 0.2s, 0.2s, 0.25s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s
Of course, ultimately it all just comes down to your preference of typing and maintaining your source code. But I personally prefer the 2nd option.
TIP:
Additional benefit of using this is, if one of the Constituent properties is same for all transitions, you don't need to mention it multiple times. For example, in the above example, if the transition-duration was the same(0.5s) for all, you write it like this:
transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s
By having the .5s delay on transitioning the opacity property, the element will be completely transparent (and thus invisible) the whole time its height is transitioning. So the only thing you will actually see is the opacity changing. So you will get the same effect as leaving the height property out of the transition :
"transition: opacity .5s .5s;"
Is that what you're wanting? If not, and you're wanting to see the height transition, you can't have an opacity of zero during the whole time that it's transitioning.
This helped me understand / streamline, only what I needed to animate:
// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}
.base {
max-width: 0vw;
opacity: 0;
transition-property: max-width, opacity; // relative order
transition-duration: 2s, 4s; // effects relatively ordered animation properties
transition-delay: 6s; // effects delay of all animation properties
animation-timing-function: ease;
&:hover {
max-width: 100vw;
opacity: 1;
transition-duration: 5s; // effects duration of all aniomation properties
transition-delay: 2s, 7s; // effects relatively ordered animation properties
}
}
~ This applies for all transition properties (duration, transition-timing-function, etc.) within the '.base' class
I think that this should work:
.element {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}