[TextField] Improve outlined transition

[oliviertassinari]

Continuation of #17680.

Preview: https://deploy-preview-19228--material-ui.netlify.com/

I have looked closer at the animation of the input, from a global perspective. I have used https://accounts.google.com/signin/v2/identifier and https://material.io/components/text-fields/ to benchmark. It leads me to the following. I would love to get your perspective on them:

1. It seems that Google doesn't animate the border-width nor the border-color (spec + google single singe on). On Safari and Firefox, the animation is junky. It feels like only the label actually transition, and that the border color and width wait for the end of the label transition to suddenly pick the right values, with a small delay. Removing these animations lead to a smoother experience.
2. It seems that the spec encourages the shortest duration value (150ms) instead of the shorter (200ms) I have given up on the changes, it gives me motion sickness, it moves too fast. The animation in the specification video seems to run for 180ms.
   
3. I believe that we can align the label and labelWidth animation, to be closer. In particular, we could make both starts from the left edge. But I'm not too sure. Is the long term plan (v5) to remove the labelWidth's version? In which case, it doesn't really matter.
4. I have tweaked the delay and duration to make it feels like a single animation is running (not two out of sync).

[eps1lon]

I noticed the border-width transition as well when working on #17680. It seems like the border could use some anti-aliasing. Otherwise it doesn't look very smooth. I'm favoring removal of any border transition.

[mui-pr-bot]

Details of bundle changes.

Comparing: c29c8ad...f6a7fc8

bundle	Size Change	Size	Gzip Change	Gzip
@material-ui/core	▼ -288 B (-0.08% )	361 kB	▼ -37 B (-0.04% )	98.8 kB
@material-ui/core[umd]	▼ -288 B (-0.09% )	317 kB	▼ -30 B (-0.03% )	92 kB
TextField	▼ -288 B (-0.23% )	125 kB	▼ -26 B (-0.07% )	36.6 kB
OutlinedInput	▼ -288 B (-0.38% )	74.7 kB	▼ -24 B (-0.10% )	23.2 kB
TablePagination	▼ -288 B (-0.20% )	143 kB	▼ -21 B (-0.05% )	41.9 kB
Select	▼ -288 B (-0.25% )	117 kB	▼ -16 B (-0.05% )	34.6 kB
@material-ui/lab	--	185 kB	--	55.2 kB
@material-ui/styles	--	51.2 kB	--	15.4 kB
@material-ui/system	--	14.8 kB	--	4.07 kB
Alert	--	83.9 kB	--	26.3 kB
AlertTitle	--	64.3 kB	--	20.2 kB
AppBar	--	64.1 kB	--	20 kB
Autocomplete	--	132 kB	--	41.3 kB
Avatar	--	65.4 kB	--	20.6 kB
AvatarGroup	--	62.4 kB	--	19.6 kB
Backdrop	--	68 kB	--	21 kB
Badge	--	65.4 kB	--	20.4 kB
BottomNavigation	--	62.5 kB	--	19.6 kB
BottomNavigationAction	--	75.7 kB	--	23.9 kB
Box	--	71 kB	--	21.7 kB
Breadcrumbs	--	67.9 kB	--	21.3 kB
Button	--	79.9 kB	--	24.5 kB
ButtonBase	--	74.2 kB	--	23.3 kB
ButtonGroup	--	83.4 kB	--	25.5 kB
Card	--	63 kB	--	19.7 kB
CardActionArea	--	75.3 kB	--	23.7 kB
CardActions	--	62.2 kB	--	19.5 kB
CardContent	--	62.1 kB	--	19.4 kB
CardHeader	--	65.2 kB	--	20.5 kB
CardMedia	--	62.5 kB	--	19.7 kB
Checkbox	--	83.2 kB	--	26.3 kB
Chip	--	82.8 kB	--	25.4 kB
CircularProgress	--	64.2 kB	--	20.3 kB
ClickAwayListener	--	3.91 kB	--	1.55 kB
Collapse	--	68.2 kB	--	21.1 kB
colorManipulator	--	3.88 kB	--	1.52 kB
Container	--	63.4 kB	--	19.8 kB
CssBaseline	--	57.7 kB	--	18.1 kB
Dialog	--	83.2 kB	--	25.9 kB
DialogActions	--	62.2 kB	--	19.5 kB
DialogContent	--	62.3 kB	--	19.5 kB
DialogContentText	--	64.2 kB	--	20.2 kB
DialogTitle	--	64.4 kB	--	20.2 kB
Divider	--	62.7 kB	--	19.7 kB
docs.landing	--	50.5 kB	--	13.3 kB
docs.main	--	596 kB	--	194 kB
Drawer	--	85 kB	--	25.8 kB
ExpansionPanel	--	72.5 kB	--	22.7 kB
ExpansionPanelActions	--	62.2 kB	--	19.5 kB
ExpansionPanelDetails	--	62.1 kB	--	19.4 kB
ExpansionPanelSummary	--	78.3 kB	--	24.7 kB
Fab	--	77 kB	--	24 kB
Fade	--	23.6 kB	--	8 kB
FilledInput	--	73.7 kB	--	22.9 kB
FormControl	--	64.5 kB	--	20.1 kB
FormControlLabel	--	65.6 kB	--	20.6 kB
FormGroup	--	62.1 kB	--	19.5 kB
FormHelperText	--	63.5 kB	--	20 kB
FormLabel	--	63.6 kB	--	19.7 kB
Grid	--	65.2 kB	--	20.4 kB
GridList	--	62.6 kB	--	19.7 kB
GridListTile	--	63.9 kB	--	20 kB
GridListTileBar	--	63.3 kB	--	19.9 kB
Grow	--	24.2 kB	--	8.21 kB
Hidden	--	66.1 kB	--	20.7 kB
Icon	--	62.9 kB	--	19.7 kB
IconButton	--	76.3 kB	--	23.8 kB
Input	--	72.6 kB	--	22.7 kB
InputAdornment	--	65.2 kB	--	20.5 kB
InputBase	--	70.8 kB	--	22.2 kB
InputLabel	--	65.5 kB	--	20.2 kB
LinearProgress	--	65.4 kB	--	20.5 kB
Link	--	66.7 kB	--	21.1 kB
List	--	62.5 kB	--	19.5 kB
ListItem	--	77.3 kB	--	24.2 kB
ListItemAvatar	--	62.2 kB	--	19.5 kB
ListItemIcon	--	62.3 kB	--	19.5 kB
ListItemSecondaryAction	--	62.1 kB	--	19.5 kB
ListItemText	--	65.1 kB	--	20.4 kB
ListSubheader	--	62.9 kB	--	19.8 kB
Menu	--	88.9 kB	--	27.4 kB
MenuItem	--	78.4 kB	--	24.5 kB
MenuList	--	66.2 kB	--	20.7 kB
MobileStepper	--	68 kB	--	21.3 kB
Modal	--	14.5 kB	--	5.05 kB
NativeSelect	--	77 kB	--	24.3 kB
NoSsr	--	2.19 kB	--	1.04 kB
Paper	--	62.5 kB	--	19.5 kB
Popover	--	83.3 kB	--	25.8 kB
Popper	--	28.8 kB	--	10.3 kB
Portal	--	2.92 kB	--	1.3 kB
Radio	--	84.3 kB	--	26.6 kB
RadioGroup	--	64.6 kB	--	20 kB
Rating	--	70.6 kB	--	22.7 kB
RootRef	--	4.24 kB	--	1.64 kB
Skeleton	--	63 kB	--	19.9 kB
Slide	--	25.6 kB	--	8.73 kB
Slider	--	76.8 kB	--	24.3 kB
Snackbar	--	75.5 kB	--	23.6 kB
SnackbarContent	--	63.7 kB	--	20.1 kB
SpeedDial	--	86.4 kB	--	27.2 kB
SpeedDialAction	--	119 kB	--	37.5 kB
SpeedDialIcon	--	64.7 kB	--	20.3 kB
Step	--	62.8 kB	--	19.7 kB
StepButton	--	82.5 kB	--	26.1 kB
StepConnector	--	62.8 kB	--	19.8 kB
StepContent	--	69.3 kB	--	21.7 kB
StepIcon	--	64.8 kB	--	20.2 kB
StepLabel	--	68.7 kB	--	21.7 kB
Stepper	--	65 kB	--	20.5 kB
styles/createMuiTheme	--	16.6 kB	--	5.83 kB
SvgIcon	--	63.2 kB	--	19.8 kB
SwipeableDrawer	--	92.4 kB	--	28.9 kB
Switch	--	82.4 kB	--	26 kB
Tab	--	76.5 kB	--	24.2 kB
Table	--	62.7 kB	--	19.7 kB
TableBody	--	62.2 kB	--	19.5 kB
TableCell	--	64.2 kB	--	20.2 kB
TableContainer	--	62.1 kB	--	19.4 kB
TableFooter	--	62.2 kB	--	19.5 kB
TableHead	--	62.2 kB	--	19.5 kB
TableRow	--	62.6 kB	--	19.6 kB
TableSortLabel	--	77.6 kB	--	24.4 kB
Tabs	--	85.8 kB	--	27.2 kB
TextareaAutosize	--	5.12 kB	--	2.14 kB
ToggleButton	--	76.3 kB	--	24.2 kB
ToggleButtonGroup	--	63.3 kB	--	19.9 kB
Toolbar	--	62.5 kB	--	19.6 kB
Tooltip	--	102 kB	--	32.3 kB
TreeItem	--	74.1 kB	--	23.5 kB
TreeView	--	66.8 kB	--	21 kB
Typography	--	63.8 kB	--	20 kB
useAutocomplete	--	14.6 kB	--	5.26 kB
useMediaQuery	--	2.51 kB	--	1.06 kB
Zoom	--	23.6 kB	--	8.12 kB

Generated by 🚫 dangerJS against f6a7fc8