I'm using WebKit transition to animate certain CSS changes.
For example, say I've got a red box that I want to change to green when someone hovers. I use this:
-webkit-transition-duration: 200ms;
-webkit-transition-property: background;
-webkit-transition-timing-function: ease;
That works great. But now, say I want it to also slide downwards a bit. I use this:
-webkit-transition-property: background, margin;
That also works okay, but I want the box to slide down quickly (say 50ms). I can't change -duration because that would make the color animate fast.
How can I assign different durations to different properties in CSS animations?
I'm fine with using keyframe animations if necessary, but I haven't seen a way that they can help me.
jsfiddle for reference
Duratons can be comma-separated, corresponding to the transitioned properties, ie:
-webkit-transition-duration: 50ms, 200ms;
-webkit-transition-property: margin, background;
http://jsfiddle.net/bQ8d7/1/
Related
Tailwind offers multiple utilities for controlling which CSS properties transition, among these properties there are transition and transition-all.
I went and checked the CSS properties for both classes and here they are in the same order.
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
What is the difference between both classes and which one should I use for general transitions?
To understand the difference you need to understand an important thing about animatable properties. Some of them trigger layout changes and some of them don't.
A property that trigger a layout change will have an impact on the performance so it's recommended to avoid them as much as possible
A property that doesn't trigger a layout change will have less impact on the performance and it's recommended to animate them.
The transition class of tailwind is grouping the second set of properties (the ones that don't trigger layout change) while transition-all group all of them.
It's better to rely on transition to have good performance and you should avoid as much as possible transition-all but if you are obliged to animate all the properties then use it.
Here is a good reference to help you understand what I am talking about: https://csstriggers.com/
If you check for color you can read:
Changing color does not trigger any geometry changes, which is good.
As a side note, transform is the best when it comes to performance. It doesn't trigger layout change and doesn't trigger painting:
Changing transform does not trigger any geometry changes or painting, which is very good. This means that the operation can likely be carried out by the compositor thread with the help of the GPU.
As you mentioned, Tailwind's transition class defines transitions for a limited set of CSS properties: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter.
When using transition-all all properties that can transition will - this includes all animatable CSS properties (properties in transition and much more).
Using one or the other will depend on which properties you want to animate, if they're all covered by transition then there's no need to use transition-all.
I think If you need all properties its better to use transition-all
but if you want to be specific Use the transition-{properties} utilities to specify which properties should transition when they change.
e.g. transition-color going to be
transition-property: background-color, border-color, color, fill, stroke; as tailwind doc
Hey I am new to development so was trying to change background color when we change menu item, I have done that, but want to have some delay in changing of background color.I tried transition property but got no result.Is transition property not applicable to <body>?As I tried to provide 'id' to <body> and apply rule like this
<body id="color">
CSS
#color {
background-color: yellowgreen;
transition: background-color 2s ;
}
I am doing something wrong? What is the way to apply <div> to full page and apply the same rule?
First, when using transitions, you need to add the -webkit for Safari - http://www.w3schools.com/cssref/css3_pr_transition.asp
If you want a transition effect that takes x amount of time, you can exclude the below transition-delay. But if you want your transition to be delayed by, say 2 seconds, then you can add the transition-delay and set it you the amount of seconds you want to delay the transition for.
#color {
background-color: yellowgreen;
-webkit-transition: background-color 2s ease-in; /* Safari */
transition: background-color 2s ease-in;
-webkit-transition-delay: 2s; /* Safari */
transition-delay: 2s;
Here is a list of some timing-functions you can use for transitions - http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
Here is a fiddle to show you how the border-color transition takes .5 seconds to start on hover.
This will work only once while CSS being loaded if this id overwrites preceding or default rules. You might not even noticed it.
Once CSS is loaded, it remains in your browsers and nothing will happen anymore.
You may give a try to link your CSS file with a time stamp to force refreshing CSS each time you reload a page. kind of like /myCssFile.css&id=010012014
Actually, the good practise would be to add a class on onload event and set your transition or animation from there.
CSS is not really meant to do this.
Here is a test i made a while ago : http://codepen.io/gcyrillus/pen/rmhAp You may see an animation the very first time your browser will load it.
Mabye This Will Help
This continually changes the background color.
I found the following short definition of CSS transition commands, but I don't know what those stand for:
-webkit-transition: all 0.35s ease-in-out 0s;
What does the all stand for?
Why 0s ?
all means that all animatable properties are going to be animated; it's the default, so it can be omitted; of course, you are going to see a transition only for those properties that actually change value between initial and final state;
0s is the transition delay; can be omitted if it's 0s (there may be
issues in some browsers with writing just 0 instead of 0s)
So that code is actually equivalent to:
transition: .35s ease-in-out;
Also, the line you've written uses the -webkit- prefix which means it's only going to work only in WebKit browsers. However, all current versions of desktop browsers that support transitions support them unprefixed.
There are some great articles detailing the use of transition -
http://css-tricks.com/almanac/properties/t/transition/
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
'All' specifies the properties to transition.
The final time parameter is a delay argument. '0s' means, as you'd expect, no delay.
If I wanted to transition just the background colour, and delay by 4 seconds, I would write:
transition: background-color 0.35s ease-in-out 4s;
transition: <property> <duration> <easing> <delay>;
Universal property transition is shorthand for 4 individual properties: transition-property, transition-duration,transition-delay, and transition-timing-function.
First 2 properties are required even though a default value for transition-property is all which defines that all properties that can transition will transition. The transition-timing-function property is defined by predefined functions.
Duration and delay properties are defined with seconds or milliseconds, just keep in mind that first time defined is always duration.
Source: https://kolosek.com/css-transition/
I want a CSS3 linear transition for a "list-style-image". It will be for Firefox, so it will have "-moz-".
-moz-transition: list-style-image 0.2s linear;
The above code does not work. Is it even possible? Thanks in advance.
No. Transitions generally only work on things where the intermediate steps can be calculated in a predictable way: colors or numbers (in px, em, generally). Images or binary style types (like display none/block) are either one value or the other, and have no intermediate values to use in transition.
Situation:
View the jsFiddle
Inside of a div I have an image followed by text which has a font-weight of 900 on it. In my locally hosted environment I'm using a custom font, but for the fiddle above I chose the "ever-so-stylish" Comic Sans to illustrate my point. Before anything happens I set the opacity of the entire div to 0.7. However, on hovering over the div, I want the opacity of everything to come to full opacity.
Problem:
I've noticed that in Webkit browsers only (more apparent on Chrome than it is on Safari however), upon hovering on and off the of the div tag, the text's weight will appear to change. In actuality, there's no change at all of course in the weight of the text. However, upon closer review you'll see the text appears at it's desired weight only on hover, but not in a non-hovered state.
Things I've Done:
I've tested this in all the latest versions of Chrome, Firefox, and Safari.
I am testing this currently on the new MacBook Pro which, in my case, is a retina screen. However, the colleague next to me tested the fiddle on her iMac (non-retina display) only to find the issue still apparent.
Perhaps I'm just crazy, but I feel this actually may be how webkit browsers choose to render out elements with different opacities. Then again, that may be just me trying to avoid admitting I did something wrong.
And naturally I thought I could lighten the mood with Comic Sans. Here's a screen capture to help explain the issue:
It's not an issue with the opacity itself (in fact, turning it back to 1 in #Zoltan's example doesn't change anything for me).
The issue is with the transitions, there are two anti-aliasing modes that webkit can use:
Subpixel (the default, but not supported during animations, transitions or transforms) or
Grayscale
This means that when an element is rendered using subpixel antialiasing and an animation is applied to it, webkit temporarily switches to grayscale for the duration of the animation and then back to subpixel once finished.
Given that subixel antialiasing results in a slightly heavier font face you get the unwanted artifact.
To solve the issue, add this to your css:
html {
-webkit-font-smoothing: antialiased;
}
This forces grayscale antialiasing and all the text and you won't see the switching.
(end result: http://jsfiddle.net/ErVYs/9/)
A possible solution would be to make the opacity transition not to 1, but .999 - http://jsfiddle.net/ErVYs/2/
div {
width: 200px;
text-align: center;
opacity: 0.7;
transition: opacity ease-in 0.25s;
-webkit-transition: opacity ease-in 0.25s;
-moz-transition: opacity ease-in 0.25s;
-o-transition: opacity ease-in 0.25s;
}
div:hover {
opacity: .999;
}