I have two transitions on the same element out of which one works as expected, but the other one doesn't work on hover. What can I do to get both the transitions working?
CSS CODE:
.ArrowNext
{
top:40%;
right:14%;
background:rgba(0,0,0,0.7);
width:200px;
height:200px;
position:absolute;
cursor:pointer;
transition: right 1s; /* Wont work*/
transition: background 1s;
}
.ArrowNext:hover
{
right:11%; /* Wont work*/
background:rgba(255,255,255,0.7);
}
Your second declaration is overriding the first.
Instead of declaring multiple transitions separately, you declare them together:
transition : right 1s ease-out, background 1s ease-out;
You should play with easing methods as well. They can really change the "feel" of the animation.
Also, don't forget about vender prefixes:
-webkit-transition : right 1s ease-out, background 1s ease-out;
-moz-transition : right 1s ease-out, background 1s ease-out;
-o-transition : right 1s ease-out, background 1s ease-out;
transition : right 1s ease-out, background 1s ease-out;
Here is some great documentation on transitions: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
And since you're new to CSS you should check-out http://caniuse.com, it's a great resource for determining browser compatibility.
Related
Really simple. I just want to do this:
.div
{
padding-top: 16px;
transition: transform 250ms ease-in-out, filter 1000ms ease-in 250ms ease-out;
}
.div:hover
{
transform: translateY(-16px);
filter: brightness(110%) drop-shadow(0px 16px 16px red);
}
I only want to make the filter ease-in slower, yet ease-out with the transform at the same time.
It's all correct CSS till this part filter 1000ms ease-in 250ms ease-out; which is just an illustration code to what I wished I could do.
I also tried
transition: transform 250ms ease-in-out, filter 1000ms ease-in, filter 250ms ease-out;
But setting the filter more than 1 time just overrides the previous one.
Is there a CSS-only solution for this?
Yes, there is.
Since currently CSS does not support setting both ease-in and ease-out individually for a transition without affecting other transitions, you'll have to use a "hack" which is to use the :not(:hover) event to set the filter's ease-out.
.div:not(:hover)
{
transition: transform 250ms ease-in-out, filter 250ms ease-out;
}
Now every time you stop hovering, the filter is overridden resetting the ease-in property to default while simultaneously setting ease-out to whatever duration wanted giving the effect precisely described.
The ease-in is actually ignored inside :not(:hover) so it doesn't matter if it is a default value or infinity. Knowing the previous, you could set both of ease-in-out inside :not(:hover) if you want and it'd make 0 difference.
Full code:
.div
{
transition: transform 250ms ease-in-out, filter 1000ms ease-in;
}
.div:hover
{
transform: translateY(-16px);
filter: brightness(110%) drop-shadow(0px 16px 16px red);
}
.div:not(:hover)
{
transition: transform 250ms ease-in-out, filter 250ms ease-out;
}
Note that not only the filter's ease-out is overridden, but the entire transition which is why you have to set all other transitions in it again even though you changed only one.
This solution is not only for hovering as it could be replicated with other events. It is but a matter of changing :hover in the code above to whatever event you seek.
How can I make transition delay from one css attribute to another on the same element , the example I want to make it to make transition for width first then for height of div element
<div class="rect"id="box2"></div>
and here's the CSS
.rect{
margin-top:50px;
width:10px;
height:80px;
background-color:black;
}
#box2{
transition:all 1s ease-in-out ;
-webkit-transition:all 1s ease-in-out ;
-moz-transition:all 1s ease-in-out ;
}
#box2:hover{
width:300px;
height:200px;
}
this code makes the height and width works together, and transition-delay in the #box2 makes delay for the whole transition! what should I do?
here's the sample http://jsfiddle.net/bBnQW/
#box2{
transition:width 1s ease-in-out, height 1s ease-in-out 1s ;
-webkit-transition:width 1s ease-in-out, height 1s ease-in-out 1s ;
-moz-transition:width 1s ease-in-out, height 1s ease-in-out 1s ;
}
if this is what you want...
As far as I know, you don't. You have the CSS3 transition-delay property, which I think you already have tried. My advice, in case you don't find a solution for this, is to use a jQuery solution to achieve that effect. You can do it with just a couple of lines of code (maybe even less than what you have in CSS).
at the moment I am styling a textbox by changing its background-color and font color on hover :
transition: background-color 1s, color 1s;
I would now like to change the color after the background color by using transition-delay. The problem is that transition delay does not take the PROPERTY (i.e. color) that I would like to delay. Is there any way to delay specific attributes only?
Transition Delay is property specific.
For instance
transition: background-color 1s linear 2s, color 1s;
transition: property name | duration | timing function | delay
When using shorthand, it seems as though you need to specify the timing function as well.
(Source)
li {
transition-duration: 0.4s, 0.4s, 0.4s, 0.4s, 0.4s;
transition-delay: 0s, 0s, 0s, 0s, 0s;
transition-property: transform, opacity, visibility, color, background-color;
}
li:nth-of-type(1) {
transition-delay: 0s, 0s, 0s, 0s, 0s;
}
li:nth-of-type(2) {
transition-delay: 0.1s, 0.1s, 0.1s, 0s, 0s;
}
The good news is that you can configure transition parameters i.e. transition-delay, transition-duration etc. for a specific css property. The sad news is that you cannot specify different parameters for different css properties on the same element. For example, this won't work:
.elem {
transition: background-color 2s 0.5s ease; // want background-color to transition differently
transition: opacity 3s 1.5s ease; //this unfortunately overrides the previous line
}
In that case I would suggest using animations with #keyframes. The code is a bit more elaborate but then you can apply timing, duration, etc. more liberally.
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;
}
Is it possible to use CSS3 transitions with a different delay switching between "states"? For example, I'm trying to make an element immediately higher upon hover then on 'mouseout' to wait a second before sliding back to the element's initial height.
Demo page: jsfiddle.net/RTj9K (hover black box in top-right corner)
CSS: #bar { transition:.4s ease-out 0, 1s; }
I thought the timings on the end related to delay but it doesn't seem to be working the way I'd imagined.
If you want different CSS transition delays on hover and mouseout, you have to set them using the relevant selectors. In the example below, when an element is hovered, the initial delay on hover is 0 but on mouseout the transition is delayed by 1s.
/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; }
/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }
You can find the full CSS in my question's updated demo below. I've used the shorthand transition property, the order of the values are:
transition:<property> <duration> <timing-function> <delay>;
Answer Demo: http://jsbin.com/lecuna/edit?html,css,output
Here is a simplified JSFiddle example. Basically you need the transition-delay property:
#transform {
height:40px;
width:40px;
background-color:black;
transition: .4s ease-out;
transition-delay: 2s;
/*or shorthand: transition: .4s ease-out 2s;*/
}
#transform:hover {
transition: .4s ease-out;
width:400px;
}
/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; }
/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0; }
Just to say that this won't work if you do not enter 's' (seconds) symbol, so:
/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; }
/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; } /* note "0s" */