Here's a solution that also works on Firefox:
transition: all 0.3s ease, background-position 1ms;
I made a small demo: http://jsfiddle.net/aWzwh/
Answer from Felix Edelmann on Stack OverflowMDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Reference › Properties › transition
transition CSS property - CSS | MDN
3 days ago - The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, transition-delay, and transition-behavior. transition: margin-right 2s; transition: margin-right 2s 0.5s; transition: margin-right 2s ease-in-out; transition: margin-right 2s ease-in-out 0.5s; transition: margin-right 2s, color 1s; transition: all 1s ease-out; <section id="default-example"> <div id="example-element">Hover to see<br />the transition.</div> </section> #example-element { background-color: #e4f0f5; color: black; padding: 1rem; border-radius: 0.5rem; font: 1em monospace; width: 100%; transition: margin-right 2s; } #default-example:hover > #example-element { background-color: #990099; color: white; margin-right: 40%; } Transitions enable you to define the transition between two states of an element.
W3Schools
w3schools.com › CSS › › css3_transitions.asp
CSS Transitions
div { transition: width 2s, height 4s, background-color 3s; } Try it Yourself » · The following table lists all the CSS transition properties:
Videos
#31 CSS Transition Tutorial - CSS Full Tutorial
Learn All CSS Transition Property for Smooth Animation - YouTube
03:20
CSS Multiple Transitions: Animate Many Properties All at Once! ...
12:02
CSS Transition Property | ALL You Need to Know to Use CSS Transitions ...
04:31
Master CSS Transitions for Smooth Animations - YouTube
Kirupa
kirupa.com › html5 › all_about_css_transitions.htm
All About CSS Transitions | kirupa.com
August 15, 2016 - By specifying all, any change to any CSS property that your transition applies to will automatically transition. I generally don't recommend using the all keyword unless you really are planning on wanting a transition for changes occurring on ...
Reddit
reddit.com › r/css › noob here: what does "transition: all" do?
r/css on Reddit: Noob here: What does "transition: all" do?
December 17, 2020 -
Can't find an answer in w3schools and mdn makes no sense to me.
Top answer 1 of 4
6
do you know what ‘transition’ does? if yes, then it transition ALL css properties of that element
2 of 4
3
"transition: all" is the compounded rule that would be for, ie = transition-duration: 350ms; transition-property: opacity; etc. if you use transition when compounding sibling rules, it can be used as: transition: all 350ms ease; The first in the array is selecting all properties. The second is the timing associated to the "shift" change to the property. The last being the timing function. Either it be a gradual or a sloping-time. An example that you can use would be: .foo { opacity: 0; transition: all 350ms ease-out; &:hover { opacity: 1; } } Example properties to use: transform: translate (x,y); transform: rotate(xdeg); transform: scale(x); opacity: 1/0; "all" is selecting every css property, regardless if it's being used, to have the same timing when a different focus/state is used. Hope this helps.
Top answer 1 of 6
187
Here's a solution that also works on Firefox:
transition: all 0.3s ease, background-position 1ms;
I made a small demo: http://jsfiddle.net/aWzwh/
2 of 6
22
Hope not to be late. It is accomplished using only one line!
-webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
That works on Chrome. You have to separate the CSS properties with a comma.
Here is a working example: http://jsfiddle.net/H2jet/
CSS-Tricks
css-tricks.com › almanac › properties › t › transition
transition | CSS-Tricks
December 13, 2024 - HOWEVER, I’ve just discovered by tinkering around with STYLE ELEMENT’s ‘MEDIA’ Attribute in combination with CSS3’s transition effects, we are VERY MUCH ABLE to trigger the transitions via a LIST of other events, WITHOUT the alternate use of ANY javascript/jquery what-so-ever for animations/fades/element-moving on window-resize, etc! (ex: [ STYLE MEDIA=”all and (min-width: 600px)” ] ) Leaving us actually quite a large number of new options, such as screen orientation: landscape/portrait; useful for mobile devices, etc!
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Guides › Transitions
CSS transitions - CSS | MDN
December 16, 2025 - This article describes each relevant CSS property and explains how they interact with each other. ... Transitioning to and from the none value of the discretely animated display property.
Tailwind CSS
tailwindcss.com › docs › transition-property
transition-property - Transitions & Animation - Tailwind CSS
For CSS variables, you can also use the transition-(<custom-property>) syntax: <button class="transition-(--my-properties) ..."> <!-- ... --></button> This is just a shorthand for transition-[var(<custom-property>)] that adds the var() function for you automatically. Prefix a transition-property utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above: <button class="transition-none md:transition-all ..."> <!-- ...
Prismic
prismic.io › blog › css-hover-effects
CSS Hover Effects: 40 Engaging Animations To Try
December 11, 2024 - The birds in this project were all created with HTML and CSS. Initially, the birds are sleeping with there eyes closed, and when hovered over, 2 out of 3 of them wake up. ... @keyframes sleep: Gives all characters a subtle breathing/pulsing animation by alternating the birds’ heights. This animation is constantly running on all birds · @keyframes wakeup: Transitions the height of all characters on hover.
web.dev
web.dev › learn › css › transitions
Transitions | web.dev
The transition-property accepts one or more CSS property names in a comma-separated list. Optionally, you may use transition-property: all to indicate that every property should transition.
W3C
w3.org › TR › css-transitions-1
CSS Transitions Module Level 1
January 8, 2026 - The transition-property property specifies the name of the CSS property to which the transition is applied. ... A value of none means that no property will transition. Otherwise, a list of properties to be transitioned, or the keyword all which indicates that all properties are to be transitioned, ...
Nerd Cave
nerdcave.com › tailwind-cheat-sheet
Tailwind CSS Cheat Sheet
Cheat sheet to learn Tailwind CSS quickly. Browse and search all Tailwind utility classes or CSS properties on one page.
Thoughtbot
thoughtbot.com › blog › transitions-and-transforms
CSS transitions and transforms for beginners
February 21, 2025 - The transition-property specifies the CSS property where the transition will be applied. You may apply a transition to an individual property (e.g., background-color or tranform) or to all properties in the rule-set (i.e., all).
CodeWithHarry
codewithharry.com › tutorial › css-transitions
Transitions | CSS Tutorial | CodeWithHarry
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Transition Example</title> <style> body { text-align: center; font-family: Arial; } .box { width: 150px; height: 150px; margin: 50px auto; background: lightblue; border: 2px solid navy; transition: all 2s; } .box:hover { width: 200px; height: 200px; background: coral; } </style> </head> <body> <h2>Basic CSS Transition</h2> <div class="box"></div> <p>Hover the box to see it grow in size and change color <b>smoothly</b> over 2 seconds.</p> </body> </html>
Animista
animista.net
Animista - On-Demand CSS Animations Library
Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Guides › Transitions › Using
Using CSS transitions - CSS | MDN
Instead of having property changes ... element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized....
Josh W. Comeau
joshwcomeau.com › animation › css-transitions
An Interactive Guide to CSS Transitions • Josh W. Comeau
transition-property takes a special value: all. When all is specified, any CSS property that changes will be transitioned.
Josh Collinsworth
joshcollinsworth.com › blog › great-transitions
Ten tips for better CSS transitions and animations - Josh Collinsworth blog
If you want to move, scale, or rotate an element, always use the CSS transform property. Applying a transform won’t affect layout, which minimizes recalculations and keeps the browser humming along smoothly. Handily, many of the most common animations and transitions you might use on the web can be achieved using some combination of transform and opacity.
MarkSheet
marksheet.io › css-transitions.html
CSS transitions - Free tutorial to learn HTML and CSS
Only 1/3 of CSS properties can be animated. Mozilla has a complete list. By default, the transition-property property has a value of all, which simply means it will animate all possible properties.
Transition
transition.style
Transition.css - easy transitions with clip-path
Drop-in CSS transitions