Solvedant design Is there any way to disable all animations?

Such as when hover on a table row we don't want the transition of background color, for dropdown list we don't want the popup animation, etc. We'd like a quick response system.

18 Answers

✔️Accepted Answer

If anyone is wondering how to get rid of this clicked (glow fade-out) animation:

Depending on the Ant version:

.ant-btn-clicked:after {
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;


[ant-click-animating-without-extra-node]:after {
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;


Other Answers:

I faced the same situation of modal's transition effect and finally found a cure.
For those who would like to disable the default modal transition effect, simply add the followings:

* {
    animation-duration: 0s !important;

Quick way to do that but aggressive.

This is one of the top results in Google when searching for customizing Antd's button animations.

Instead of putting this info in the official docs, it's here and it doesn't even work? @mattcarlotta 's response doesn't have any effects with the current version of Antd.

Going into the lib and into the CSS for the button component, I see this, which is what dictates the button transition on click:

.ant-btn:focus { color: #40a9ff; background-color: #fff; border-color: #40a9ff; }

First of all, it's bizarre to me that a UI framework would use hardcoded values for styles instead of referencing global theme vars or being able to pass in custom props via the API. From what I can tell, the button animations / transitions are not customizable at all, without overriding the properties with new styles.

To remove the color transition effect when selecting a button, this works (background-color is whatever the original button color is):

.ant-btn:focus, .ant-btn.focus { background-color: red !important; }

And on:hover is the same, but with 'hover' instead of 'focus'.

But something like, changing the color of the button on selection (initial click) and then immediately reverting the color of the button back after the click, would take a lot more digging and overriding, which is way too much effort for a library that's supposed to streamline writing UI components.

True to its description, Antd really is an "enterprise-class" system by being exceptionally inaccessible to customize with hacky and out-of-date solutions for common design requirements.

If anyone comes across this and is looking to disable button animation I accomplished it with the following css override:

.ant-btn.ant-btn-background-ghost::after {
border: none !important;

Related Issues:

ant design How to set 100% of height layout
This works for me: <Layout style={{height:100vh}}> I am a newbie I base on Meteor JS How to set 100%...
ant design Each record in table should have a unique key prop,or set rowKey to an unique primary key.
@ahmetkuslular The error message is pretty explicit your data set must contain items with a key prop...
ant design 😨 Table align broken when cell contains long number or long word after 3.11.3
超长连续字段(长数字和长单词) 破坏表格布局的问题(即使你指定了列的宽度也会被挤开),之前组件内默认加过 word-break: break-word; 去纠正此类布局,又会引起 #13624 的问题...
ant design Can't set form initialValues from state
I had the same problem sometimes the initialValues are empty and I need to fetch the initialValues f...
ant design CheckBox with Form was not work
I ran in to similar problem when i was trying to send form with selected checkbox because function v...
ant design import the antd theme, webpack build show .bezierEasingMixin error ?
version: antd@2.x less@2.x 是OK的。 less@3.x,需要开启 配置项 javascriptEnabled: true 但依然有错误: ...
ant design Check Box Validation not working
Following @yesmeck 's suggestion I came up with the following code which works as well ...
ant design Customization of theme is broken with latest version of less-loader
#23603 #23596 less-loader@5 less-loader@6 I have searched the issues of this repository and believe ...
ant design 引用国际化包报错
Change to fix this problem The resource provided by the document is wrong. I have searched the issue...
ant design Is there any way to disable all animations?
If anyone is wondering how to get rid of this clicked (glow fade-out) animation: Depending on the An...
ant design error TS2605 JSX element type Button is not a constructor function for JSX elements
Do you have allowSyntheticDefaultImports: true in tsconfig.json? Hello since this morning I am getti...
ant design Type error: Cannot find name 'ResizeObserver'.
The temporary fix is putting following interface to your typings/index.d.ts: I have searched the iss...
ant design Flash of unstyled content for first load
There is also a 'flash' of content reflow apparent on - have a...
ant design Select Custom dropdown with dropdownRender property not respond to click
Another perhaps more elegant I have searched the issues of this repository and believe that this is ...
ant design Impossible to expand Select component dropdown programatically
@martis347 Propably it's mousedown event now instead of click I have searched the issues of this rep...
ant design Errors when importing antd.less using less-loader
You mean less@3.0.0-alpha.3? Could you try less@2.7.2? Version antd @2.13.4 webpack @3.6.0 less @3.0...
ant design Typing issues with Typescript 3 and new LibraryManagedAttributes feature
For me the workaround is adding skipLibCheck: true to tsconfig.json
ant design Webpack css loading
This issue is resolved for me when i remove part of the recommended .babelrc config for ant-design B...
ant design Menu.Item should have the onClick param
NOTE: Please click the thumb up (👍) rather than '+1' comment Wrapping with <a> works fine but I thi...
ant design Integrating with react-boilerplate
I found a workaround but I don't know why yet The dot can't existed in JSX expression for production...
ant design Equal height items
Using flexbox-enabled rows with type=flex and setting the height to 100% on the column contents work...
ant design useForm > getFieldValue does not work
In addition to this I also noticed that getFieldValue which is supposed to listen to field value cha...
ant design Button tsd error in latest typescript@3.4.2
Same here But I bypassed the problem by downgrading @types/react to 16.8.11 I think it breaks in bot...
ant design Long list optimization
SuperSelect is based on antd Select which supports a virtual list of tens of thousands of data the s...
ant design form demo element id not unique
@zhutiancheng2 给 Form 加个 name 就行了。react-component/form#197 Please add name to different Form: ...
ant design Add .focus .blur method for every form control components
@ChuckJonas That's exactly the problem Most of you probably want to really focus and open the rc-sel...
ant design Property 'value' does not exist on type 'EventTarget'.
See DefinitelyTyped/DefinitelyTyped#12239 you can try event.currentTarget. Version 2.12.1 Environmen...
ant design Table onRow Event multiple triggered
Perfect!!! It works with: Thanks a lot @yesmeck !!! Version 3.1.0 Environment macos 10.12.6 ...
ant design Menu.SubMenu SubMenu.js:452 Uncaught TypeError: Illegal invocation
Could you remove node_modules and package-lock.json(or yarn.lock) then try again? ...
ant design TS2304: Cannot find name 'PropertyKey'.
Because PropertyKey is in es2015 library so you should included es2015 in the compilation add lib op...
ant design How to make nested table show different data in different rows?
What problem does this feature solve? At parent table's rows there are different data in nested tabl...
ng zorro antd 9.0.0-beta.2 Fails to compile
Same problem with beta.3 and angular 9.1 but on many more components ng-zorro-antd/* A small extract...
ant design pro 🐛[BUG] Login doesn't work properly if /api/currentUser route is protected
I can also confirm that I've been hit by this It's much simpler to reproduce also ...
ant design mobile antd-mobile does not contain an export
Same issue occurred when I executed yarn build Version 1.1.3 Environment react (web browsers) Reprod...
slider How do I reset values for slider
No your first fiddle is still a uncontrolled component I have a slider as below which uses marks for...
material ui Module not found: Can't resolve 'material-ui-icons/Menu' Martial Next
For anyone else experiencing this issue: npm install @material-ui/icons
storybook Webpack 4 support?
I'm getting the below error when running Storybook with a project using Webpack 4; This is preventin...
material ui Working with react-hook-form
I have added the waiting for users upvotes tag I'm closing the issue as we are not sure people are l...
material ui @material-ui/styles: Usage in a Class Component?
i used withStyles instead of makeStyle like this... How does one use the makeStyles API within a cla...
storybook babelHelpers is not defined using Rollup [Solved]
@alejandronanez you can remove external-helpers from your .babelrc file and enable it back only on y...
material ui Unable to install @mui/material-icons last version
I found a solution here : yarnpkg/yarn#4890 (comment) So either install it using yarn add @mui/mater...
material ui theme.spacing is not a function with @material-ui/[styles/core] 4.0.1
Sorry I found the problem Trying to fix another issue today I tried to reset my whole Material-UI 4....
material ui Convert ListItem compatible with react-router
This is covered in the documentation:
material ui Can we add new property for color in palette in MuiTheme
@davidcalhoun Yes you are right this issue is about extending the Button implementation so people ca...
storybook Storybook doesn't work with the newest version 10.0.1 of PostCSS Autoprefixer plugin
I also get the same issue as @matamatanot (also with tailwind 2.0.2) I might have missed something f...
material ui Tooltip issue using Jest: TypeError document.createRange is not a function
@MorganDbs See jsdom/jsdom#317 We use the following patch for our tests: Does it fix your problem? U...
material ui [Tabs] Improve TabPanel demos, avoid validateDOMNesting warning
Note: the warning appears only because the demo code has: Changing it like this takes care of it: ...
material ui [Table] Fixing head in material
To be noted the header can be sticky positioned: ...
material ui [TextField] Handle Chrome autofill
Also notice the yellow background for auto filled text can it be overridden? @garygrubb I did this v...
storybook Storybook build fails in Node 13 (cannot find module @babel/compat-data/corejs3-shipped-proposals)
Removing node_modules and yarn.lock and using node 13.13 has been helped for me. ...