Is there a way to target a specific CSS Transform property (such as Rotate(), Scale(), TranslateX()) with the Transition property? Something along the lines of:
transition: 200ms transform-Rotate, 500ms transform-TranslateX;
No. The CSS transition spec states that only single CSS properties can be used in the transition-property field. transform is a CSS property. Rotate(), Scale(), etc, are transform functions, not CSS properties.
Related
I have a polymer web app with tons of css animations, all encapsulated inside different custom elements (using shadow dom).
I’d like to add an option for disabling all css animations.
Every component includes a shared style css document.
What’s the best practice for conditionally disable/enable all animations without editing each and every custom element?
If I add the following css to the shared-styled doc then all animations are cancelled:
:host * { transition: none !important }
But I want to add it in case localstorage(“disableAnimations”) is true.
You have to write a behavior or mixin (depends on your polymer version) that observes the localStorage and if it has the value you expect you add the css line to your components.
*,body{
transition: all 0.3s ease-in-out, width 0, height 0, top 0, left 0;
}
I use the following CSS to animate the change in background color for a div:
#availability-button.red-add, #availability-button.red-remove, #availability-button.green-add, #availability-button.green-remove{
transition: background-color 2000ms linear;
}
#availability-button.red, #availability-button.red-add, #availability-button.red-add-active{
background-color: #c21807;
}
#availability-button.green, #availability-button.green-add, #availability-button.green-add-active{
background-color: #68af28;
}
The above works only one way - when you transition from green to red.
What is causing this?
Fiddle
You only need #availability-button.red and #availability-button.green. The animation life-cycle classes like red-add and red-remove are useful if you're using animations, but for transitions can be tricky since you're just transitioning the change in properties between selectors.
In this case, it seems like multiple selectors are matched in the red-* and green-* groups, which causes undefined behavior in how the transition is completed.
Updated Fiddle
I have a transition attribute like this:
transition: transform .3s cubic-bezier(0, 0, 0.25, 1);
Initially, the element has no transform attribute.
Is it possible to apply a class that allows you to first set one transform-attribute and then transition to another attribute (I know I could do it by applying two classes after each other, but that is not practical in this scenario):
transform: translate3d(0,750px,0);
to
transform: translate3d(0,100vh,0);
In CSS transition shorthand is essential transition-delay? I would like to know if is possible to use shorthand without transition-delay...
Because i have a module on my website that minimize ces and i read that minification delete units to transition delay, and if is without unit transition doesn't work with firefox (for me also with chrome).. So:
So can i write in this way:
transition: font-size 2s ease-out; //without 0s of transition delay
Is possible ???
Thanks a lot and sorry for my english :)
IMHO there are 3 possible ways to declare an animation for certain HTML elements on the page:
* { transition: all .3s ease; } - Regarding lines of code, file size, and ease of use, I find this the most suiting solution to handle CSS animations on a page. But I do know using the asterisk selector has quite a heavy impact on performance, so this option doesn't seem like the most efficient one. Also, this sometimes causes for unwanted animations on objects where it's not needed.
.animated { transition: all .3 ease; } - Again regarding lines of code, file size and ease of use (in CSS), this looks like the optimal solution. We create a class specifically for animations, and just add this class to all elements we need an animation on. Variations can be made (adjusting the speed etc.) with other classes. But, this does require that every single HTML element you would like to animate should get this class, which means that when for some reason the classname changes one day, all these references should be updated.
.class1, .class2, .class3, ... { transition: all .3s ease; } - Another solution to this problem could be to have one giant selector for every HTML element in need of animation. This could be causing a giant CSS selector, which is not very file size friendly, nor very readable IMO. But, it does have some advantages too - there's only one place to be updated whenever an element needs animation.
So my question is:
What is the most efficient way to handle CSS animations on a HTML page?