diff --git a/docs/pages/experiments/base/autofill.tsx b/docs/pages/experiments/base/autofill.tsx
new file mode 100644
index 00000000000000..29e7b8c481bec3
--- /dev/null
+++ b/docs/pages/experiments/base/autofill.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Box from '@mui/material/Box';
+
+export default function Autofill() {
+  return (
+    <Box component="form" sx={{ maxWidth: 400, m: 2 }}>
+      <TextField
+        id="email"
+        type="email"
+        name="email"
+        label="Email"
+        placeholder="your@email.com"
+        autoComplete="email"
+        autoFocus
+        required
+        fullWidth
+        variant="outlined"
+      />
+      <TextField
+        name="password"
+        label="Password"
+        placeholder="••••••"
+        type="password"
+        id="password"
+        autoComplete="current-password"
+        autoFocus
+        required
+        fullWidth
+        variant="outlined"
+      />
+      <Button type="submit" fullWidth variant="contained">
+        Sign in
+      </Button>
+    </Box>
+  );
+}
diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js
index 7333c1c4f32cf5..3aa302938ce9c5 100644
--- a/packages/mui-material/src/InputBase/InputBase.js
+++ b/packages/mui-material/src/InputBase/InputBase.js
@@ -257,8 +257,8 @@ export const InputBaseInput = styled('input', {
 );
 
 const InputGlobalStyles = globalCss({
-  '@keyframes mui-auto-fill': { from: { display: 'block' } },
-  '@keyframes mui-auto-fill-cancel': { from: { display: 'block' } },
+  '@keyframes mui-auto-fill': {},
+  '@keyframes mui-auto-fill-cancel': {},
 });
 
 /**