Animatable Properties in CSS3
January 19th, 2020

Animatable Properties in CSS3

The following section contains a complete list of animatable properties belonging to the latest CSS3 specifications. All the properties are listed alphabetically.

PropertyAnimatableTest
backgroundsee individual propertiesExample
background-coloras a colorExample
background-positionas a repeatable list of a simple list of a length, percentage or calc()Example
background-size as a repeatable list of a simple list of a length, percentage or calc()Example
bordersee individual propertiesExample
border-bottomsee individual propertiesExample
border-bottom-coloras a colorExample
border-bottom-left-radius as a length, percentage or calc()Example
border-bottom-right-radius as a length, percentage or calc()Example
border-bottom-widthas a lengthExample
border-coloras a colorExample
border-leftsee individual propertiesExample
border-left-coloras a colorExample
border-left-widthas a lengthExample
border-radius see individual propertiesExample
border-rightsee individual propertiesExample
border-right-coloras a colorExample
border-right-widthas a lengthExample
border-spacingas a simple list of lengthExample
border-topsee individual propertiesExample
border-top-coloras a colorExample
border-top-left-radius as a length, percentage or calc()Example
border-top-right-radius as a length, percentage or calc()Example
border-top-widthas a lengthExample
bottomas a length, percentage or calc()Example
box-shadow as a shadow listExample
clipas a rectangleExample
coloras a colorExample
column-count as an integerExample
column-gap as a lengthExample
column-rule see individual propertiesExample
column-rule-color as a colorExample
column-rule-width as a lengthExample
column-width as a lengthExample
columns see individual propertiesExample
flex see individual propertiesExample
flex-basis as a length, percentage or calc()Example
flex-grow as a numberExample
flex-shrink as a numberExample
fontsee individual propertiesExample
font-sizeas a lengthExample
font-size-adjust as a numberExample
font-stretch as a font stretchExample
font-weightas a font weightExample
heightas a length, percentage or calc()Example
leftas a length, percentage or calc()Example
letter-spacingas a lengthExample
line-heightas a number or lengthExample
marginas a lengthExample
margin-bottomas a lengthExample
margin-leftas a lengthExample
margin-rightas a lengthExample
margin-topas a lengthExample
max-heightas a length, percentage or calc()Example
max-widthas a length, percentage or calc()Example
min-heightas a length, percentage or calc()Example
min-widthas a length, percentage or calc()Example
opacity as a numberExample
order as an integerExample
outlinesee individual propertiesExample
outline-coloras a colorExample
outline-offset as a lengthExample
outline-widthas a lengthExample
paddingas a lengthExample
padding-bottomas a lengthExample
padding-leftas a lengthExample
padding-rightas a lengthExample
padding-topas a lengthExample
perspective as a lengthExample
perspective-origin as a simple list of a length, percentage or calc()Example
rightas a length, percentage or calc()Example
text-decoration-color as a colorExample
text-indentas a length, percentage or calc()Example
text-shadow as a shadow listExample
topas a length, percentage or calc()Example
transform as a transformExample
transform-origin as a simple list of a length, percentage or calc()Example
vertical-alignas a lengthExample
visibilityas a visibilityExample
widthas a length, percentage or calc()Example
word-spacingas a lengthExample
z-indexas an integerExample

Leave a Reply

Your email address will not be published. Required fields are marked *

recent post

Part 3: WordPress…

Recently, I’ve been working on a proof of concept project which int...

 741 Views
Part 2: WordPress…

Uploading Files The goal of the plugin is to convert a PDF in WordPre...

 812 Views
Part 1: WordPress…

WordPress is one of the most popular content management systems on the...

 760 Views
CSS Hacks For Every Web Developer
CSS Browser-Specific Hacks

What is this? Browser hacks is an extensive list of brow...

 1111 Views
What are Operators…

Operators are symbols or keywords that tell the JavaScript engine to...

 1646 Views
CSS3 Visual Formatting…

The CSS3 visual formatting model is the algorithm that is used to pro...

 443 Views
Animatable Properties in CSS3
Animatable Properties in…

The following section contains a complete list of animatable propert...

 460 Views
Custom Permalinks in…

Do you want to create custom permalinks in WordPress for posts, page...

 420 Views
HTML5 Tag Reference

HTML5 has many new tags included and many others deprecated from the...

 427 Views
Resize and Make…

Have you ever tried resizing a image to make it larger? This usually...

 446 Views