March 1Mar 1 Administrators CSS Animatable Definition and Usage Some CSS properties are animatable, meaning that they can be used in animations and transitions. Animatable properties can change gradually from one value to another, like size, numbers, percentage and color. Browser Support The animation properties are supported in all modern browsers. The numbers in the table specifies the first browser version that fully support CSS animations. 43 10 16 9 30 Example Animate the background-color from red to blue: @keyframes mymove { from {background-color: red;} to {background-color: blue;} } Try it Yourself » Animatable Properties These properties are animatable in CSS: Property aspect-ratioTry it backgroundTry it background-colorTry it background-positionTry it background-position-xTry it background-position-yTry it background-sizeTry it block-sizeTry it borderTry it border-bottomTry it border-bottom-colorTry it border-end-end-radiusTry it border-end-start-radiusTry it border-blockTry it border-block-colorTry it border-block-end-colorTry it border-block-end-widthTry it border-block-start-colorTry it border-block-start-widthTry it border-block-widthTry it border-bottom-left-radiusTry it border-bottom-right-radiusTry it border-inlineTry it border-inline-colorTry it border-inline-end-colorTry it border-inline-end-widthTry it border-inline-start-colorTry it border-inline-start-widthTry it border-inline-widthTry it border-start-end-radiusTry it border-start-start-radiusTry it border-bottom-widthTry it border-colorTry it border-leftTry it border-left-colorTry it border-left-widthTry it border-rightTry it border-right-colorTry it border-right-widthTry it border-spacingTry it border-topTry it border-top-colorTry it border-top-left-radiusTry it border-top-right-radiusTry it border-top-widthTry it bottomTry it box-shadowTry it clipTry it colorTry it column-countTry it column-gapTry it column-ruleTry it column-rule-colorTry it column-rule-widthTry it column-widthTry it columnsTry it filterTry it flexTry it flex-basisTry it flex-growTry it flex-shrinkTry it fontTry it font-sizeTry it font-size-adjust font-stretch font-weightTry it gridTry it grid-areaTry it grid-auto-columnsTry it grid-auto-flowTry it grid-auto-rowsTry it grid-columnTry it grid-column-endTry it grid-column-gapTry it grid-column-startTry it grid-gapTry it grid-rowTry it grid-row-endTry it grid-row-gapTry it grid-row-startTry it grid-templateTry it grid-template-areasTry it grid-template-columnsTry it grid-template-rowsTry it heightTry it inline-sizeTry it insetTry it inset-blockTry it inset-block-endTry it inset-block-startTry it inset-inlineTry it inset-inline-endTry it inset-inline-startTry it leftTry it letter-spacingTry it line-heightTry it marginTry it margin-blockTry it margin-block-endTry it margin-block-startTry it margin-bottomTry it margin-inlineTry it margin-inline-endTry it margin-inline-startTry it margin-leftTry it margin-rightTry it margin-topTry it max-heightTry it max-widthTry it max-block-sizeTry it max-inline-sizeTry it min-block-sizeTry it min-inline-sizeTry it min-heightTry it min-widthTry it object-positionTry it offset-anchorTry it offset-distanceTry it offset-pathTry it offset-rotateTry it opacityTry it orderTry it outlineTry it outline-colorTry it outline-offsetTry it outline-widthTry it paddingTry it padding-blockTry it padding-block-endTry it padding-block-startTry it padding-bottomTry it padding-inlineTry it padding-inline-endTry it padding-inline-startTry it padding-leftTry it padding-rightTry it padding-topTry it perspectiveTry it perspective-originTry it rightTry it rotateTry it scaleTry it text-decoration-colorTry it text-indentTry it text-shadowTry it topTry it transformTry it transform-originTry it translateTry it vertical-alignTry it visibility widthTry it word-spacingTry it z-indexTry it ★ +1 Sign in to track progress
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.