CSS3 Animation Property

8/2/2019 CSS3 Animation Property

1/82

1.CSS3 Animation PropertyBrowser Support

The animation property is not supported in any browsers.Firefox supports an alternative, the -

moz-animation property.Safari and Chrome support an alternative, the -webkit-animation

property.

Definition and Usage

The animation property is a shorthand property for six of the animation properties:

animation-name, animation-duration, animation-timing-function, animation-delay, animation-

iteration-count, and animation-direction.

Note: Always specify the animation-duration property, otherwise the duration is 0, and will

never be played.

Value Description

animation-name Specifies the name of the keyframe you want to bind to the

selector

animation-duration Specifies how many seconds or milliseconds an animation takes tocomplete

animation-timing-function Specifies the speed curve of the animation

animation-delay Specifies a delay before the animation will start

animation-iteration-count Specifies how many times an animation should be played

animation-direction Specifies whether or not the animation should play in reverse on

alternate cycles
http://www.w3schools.com/cssref/css3_pr_animation-name.asphttp://www.w3schools.com/cssref/css3_pr_animation-name.asphttp://www.w3schools.com/cssref/css3_pr_animation-duration.asphttp://www.w3schools.com/cssref/css3_pr_animation-duration.asphttp://www.w3schools.com/cssref/css3_pr_animation-timing-function.asphttp://www.w3schools.com/cssref/css3_pr_animation-timing-function.asphttp://www.w3schools.com/cssref/css3_pr_animation-delay.asphttp://www.w3schools.com/cssref/css3_pr_animation-delay.asphttp://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asphttp://www.w3schools.com/cssref/css3_pr_animation-direction.asphttp://www.w3schools.com/cssref/css3_pr_animation-direction.asphttp://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asphttp://www.w3schools.com/cssref/css3_pr_animation-delay.asphttp://www.w3schools.com/cssref/css3_pr_animation-timing-function.asphttp://www.w3schools.com/cssref/css3_pr_animation-duration.asphttp://www.w3schools.com/cssref/css3_pr_animation-name.asp


2/82

Input:

Output:


3/82

2.CSS3 Appearance PropertyBrowser Support

The appearance property is not supported in any of the major browsers. Firefox supports an

alternative, the -moz-appearance property. Safari and Chrome support an alternative, the -

webkit-appearance property.


The appearance property allows you to make an element look like a standard user interface

element.

Value Description

normal Render the element as normal

icon Render the element as a small picture

window Render the element as a viewport

button Render the element as a button

menu Render the element as a set of options for the user to choose

from

field Render the element as an input field

input:


4/82

Output:


5/82

3.CSS3 backface-visibility Property

Browser Support

The backface-visibility property is only supported in Safari.


The backface-visibility property defines whether or not an element should be visible when not

facing the screen.This property is useful when an element is rotated, and you do not want to

see its backside.

Value Description

visible The backside is visible

hidden The backside is not visible

Input:

Output:


6/82

4.CSS3 Background Property

Browser Support

The background property is supported in all major browsers.


The background shorthand property sets all the background properties in one declaration.

The properties that can be set, are: background-color, background-position, background-size,

background-repeat, background-origin, background-clip, background-attachment, and

background-image.

It does not matter if one of the values above are missing, e.g. background:#ff0000

url(smiley.gif); is allowed.

Value Description CSS

background-color Specifies the background color to be used 1

background-position Specifies the position of the background images 1

background-size Specifies the size of the background images 3

background-repeat Specifies how to repeat the background images 1

background-origin Specifies the positioning area of the background images 3

background-clip Specifies the painting area of the background images 3

background-

attachment

Specifies whether the background images are fixed or scrolls

with the rest of the page

1

background-image Specifies ONE or MORE background images to be used 1

Input:
http://www.w3schools.com/cssref/pr_background-color.asphttp://www.w3schools.com/cssref/pr_background-color.asphttp://www.w3schools.com/cssref/pr_background-position.asphttp://www.w3schools.com/cssref/pr_background-position.asphttp://www.w3schools.com/cssref/css3_pr_background-size.asphttp://www.w3schools.com/cssref/css3_pr_background-size.asphttp://www.w3schools.com/cssref/pr_background-repeat.asphttp://www.w3schools.com/cssref/pr_background-repeat.asphttp://www.w3schools.com/cssref/css3_pr_background-origin.asphttp://www.w3schools.com/cssref/css3_pr_background-origin.asphttp://www.w3schools.com/cssref/css3_pr_background-clip.asphttp://www.w3schools.com/cssref/css3_pr_background-clip.asphttp://www.w3schools.com/cssref/pr_background-attachment.asphttp://www.w3schools.com/cssref/pr_background-attachment.asphttp://www.w3schools.com/cssref/pr_background-attachment.asphttp://www.w3schools.com/cssref/pr_background-image.asphttp://www.w3schools.com/cssref/pr_background-image.asphttp://www.w3schools.com/cssref/pr_background-image.asphttp://www.w3schools.com/cssref/pr_background-attachment.asphttp://www.w3schools.com/cssref/pr_background-attachment.asphttp://www.w3schools.com/cssref/css3_pr_background-clip.asphttp://www.w3schools.com/cssref/css3_pr_background-origin.asphttp://www.w3schools.com/cssref/pr_background-repeat.asphttp://www.w3schools.com/cssref/css3_pr_background-size.asphttp://www.w3schools.com/cssref/pr_background-position.asphttp://www.w3schools.com/cssref/pr_background-color.asp


7/82

Output:


8/82

5.CSS3 Border PropertyBrowser Support

The border property is supported in all major browsers.


The border shorthand property sets all the border properties in one declaration. The properties

that can be set, are (in order): border-width, border-style, and border-color. It does not matter

if one of the values above are missing, e.g. border:solid #ff0000; is allowed.

Value Description

border-width Specifies the width of the border

border-style Specifies the style of the borderborder-color Specifies the color of the border

inherit Specifies that the value of the border property should be inherited

from the parent element

Input:
http://www.w3schools.com/cssref/pr_border-width.asphttp://www.w3schools.com/cssref/pr_border-width.asphttp://www.w3schools.com/cssref/pr_border-style.asphttp://www.w3schools.com/cssref/pr_border-style.asphttp://www.w3schools.com/cssref/pr_border-color.asphttp://www.w3schools.com/cssref/pr_border-color.asphttp://www.w3schools.com/cssref/pr_border-color.asphttp://www.w3schools.com/cssref/pr_border-style.asphttp://www.w3schools.com/cssref/pr_border-width.asp


9/82

Output:


10/82

6.CSS3 Bottom PropertyBrowser Support

The bottom property is supported in all major browsers.


For absolutely positioned elements, the bottom property sets the bottom edge of an element

to a unit above/below the bottom edge of its containing element. For relatively positioned

elements, the bottom property sets the bottom edge of an element to a unit above/below its

normal position.

Property Values

Value Description

auto Lets the browser calculate the bottom edge position. This is default

length Sets the bottom edge position in px, cm, etc. Negative values are

allowed

% Sets the bottom edge position in % of containing element. Negative

values are allowed

Input:


11/82

Output:


12/82

7.CSS3 Box-align Property

Browser Support

The box-align property is not supported in any of the major browsers. Firefox supports an

alternative, the -moz-box-align property. Safari and Chrome support an alternative, the -webkit-box-align property.


The box-align property specifies how to align the child elements of a box.

Value Description

start For normal direction boxes, the top edge of each child is placed

along the top of the box. For reverse direction boxes, the

bottom edge of each child is placed along the bottom of the box

end For normal direction boxes, the bottom edge of each child is

placed along the bottom of the box. For reverse direction boxes,

the top edge of each child is placed along the top of the box

center Any extra space is divided evenly, with half placed above the

child and the other half placed below the child

baseline Ifbox-orient is inline-axis or horizontal, all children are placed

with their baselines aligned

stretch The child elements are stretched to fill the containing block

Input:
http://www.w3schools.com/cssref/css3_pr_box-orient.asphttp://www.w3schools.com/cssref/css3_pr_box-orient.asp


13/82

Output:


14/82

8.CSS3 Clear PropertyBrowser Support

The clear property is supported in all major browsers.


The clear property specifies which sides of an element where other floating elements are not

allowed.

Property Values

Value Description

left No floating elements allowed on the left sideright No floating elements allowed on the right side

both No floating elements allowed on either the left or the right side

none Default. Allows floating elements on both sides

Input:


15/82

Output:

9. CSS3 Color PropertyBrowser Support


16/82

The color property is supported in all major browsers.


The color property specifies the color of text.

Tips and Notes

Tip: Use a background color and a text color that makes the text easy to read.

Property Values

Value Description

color Specifies the text color. Look at CSS Color Values for a complete list ofpossible color values.

Input:

Output:
http://www.w3schools.com/cssref/css_colors_legal.asphttp://www.w3schools.com/cssref/css_colors_legal.asp


17/82

10. CSS3 ColumnsPropertyBrowser Support

The columns property is only supported in Opera. Safari and Chrome support an alternative, the

-webkit-columns property.


The columns property is a shorthand property for setting column-width and column-count.

Value Description

column-

width

The width of the columns

column-count

The number of columns

Input:
http://w3schools.com/cssref/css3_pr_column-width.asphttp://w3schools.com/cssref/css3_pr_column-width.asphttp://w3schools.com/cssref/css3_pr_column-width.asphttp://w3schools.com/cssref/css3_pr_column-count.asphttp://w3schools.com/cssref/css3_pr_column-count.asphttp://w3schools.com/cssref/css3_pr_column-count.asphttp://w3schools.com/cssref/css3_pr_column-count.asphttp://w3schools.com/cssref/css3_pr_column-count.asphttp://w3schools.com/cssref/css3_pr_column-width.asphttp://w3schools.com/cssref/css3_pr_column-width.asp


18/82

Output:


19/82

11. CSS3 Content PropertyBrowser Support

The content property is supported in all major browsers.


The content property is used with the :before and :after pseudo-elements, to insert generated

content.

Input:

Output:


20/82

12. CSS3 Counter-increamentPropertyBrowser Support

The counter-increment property is supported in all major browsers.


The counter-increment property increments one or more counter values. The counter-

increment property is usually used together with the counter-reset property and the content

property.

Property Values

Value Description

none No counters will be incremented

id number The iddefines which counter that should be incremented. The numbersets

how much the counter will increment on each occurrence of the selector.


21/82

The default increment is 1. 0 or negative values, are allowed. If the idrefers

to a counter that has not been initialized by counter-reset, the default initial

value is 0

Input:

Output:


22/82

13. CSS3 CursorPropertyBrowser Support

The cursor property is supported in all major browsers.


The cursor property specifies the type of cursor to be displayed when pointing on an element.

Property Values

Value Description

URL A comma separated of URLs to custom cursors. Note: Always specify a

generic cursor at the end of the list, in case none of the URL-definedcursors can be used

auto Default. The browser sets a cursor

crosshair The cursor render as a crosshair

default The default cursor

e-resize The cursor indicates that an edge of a box is to be moved right (east)

help The cursor indicates that help is available


23/82

move The cursor indicates something that should be moved

n-resize The cursor indicates that an edge of a box is to be moved up (north)

ne-resize The cursor indicates that an edge of a box is to be moved up and right

(north/east)

nw-resize The cursor indicates that an edge of a box is to be moved up and left

(north/west)pointer The cursor render as a pointer

progress The cursor indicates that the program is busy (in progress)

s-resize The cursor indicates that an edge of a box is to be moved down

(south)

se-resize The cursor indicates that an edge of a box is to be moved down and

right (south/east)

sw-resize The cursor indicates that an edge of a box is to be moved down and

left (south/west)

text The cursor indicates text

w-resize The cursor indicates that an edge of a box is to be moved left (west)wait The cursor indicates that the program is busy

inherit Specifies that the value of the cursor property should be inherited


Input:


24/82

Output:

14. CSS3 DirectionPropertyBrowser Support

The direction property is supported in all major browsers.


The direction property specifies the text direction/writing direction.

Property Values

Value Description

ltr The writing direction is left-to-right. This is default

rtl The writing direction is right-to-left

Input:


25/82

Output:


26/82

15. CSS3 DisplayPropertyBrowser Support

The display property is supported in all major browsers.


The display property specifies the type of box an element should generate.

Property Values

Value Description

none The element will generate no box at allblock The element will generate a block box (a line break before and after

the element)

inline The element will generate an inline box (no line break before or after

the element). This is default

inline-

block

The element will generate a block box, laid out as an inline box

inline-table The element will generate an inline box (like , with no line

break before or after)

list-item The element will generate a block box, and an inline box for the list

markerrun-in The element will generate a block or inline box, depending on

context

table The element will behave like a table (like , with a line break

before and after)

table-

caption

The element will behave like a table caption (like )

table-cell The element will behave like a table cell

table-

column

The element will behave like a table column

table-

column-

group

The element will behave like a table column group (like )


27/82

table-

footer-

group

The element will behave like a table footer row group

table-

header-

group

The element will behave like a table header row group

table-row The element will behave like a table row

table-row-

group

The element will behave like a table row group

inherit Specifies that the value of the display property should be inherited


Input:


28/82

Output:


29/82

16. CSS3 Empty-cellsPropertyDefinition and Usage

The empty-cells property sets whether or not to display borders and background on empty cells

in a table (only for the "separated borders" model).

Browser Support

The empty-cells property is supported in all major browsers.

Property Values

Value Descriptionhide No background or borders are shown on empty cells

show Background and borders are shown on empty cells. This is default

inherit Specifies that the value of the empty-cells property should be

inherited from the parent element

Input:


30/82

Output:

17. CSS3 FloatPropertyBrowser Support

The float property is supported in all major browsers.


The float property specifies whether or not a box (an element) should float.

Note:Absolutely positioned elements ignores the float property!

Property Values

Value Description

left The element floats to the left

right The element floats the right

none The element is not floated, and will be displayed just where it occurs


31/82

in the text. This is default

inherit Specifies that the value of the float property should be inherited from

the parent element

Input:

Output:


32/82

18. CSS3 FontProperty

Browser Support

The font property is supported in all major browsers.


The font shorthand property sets all the font properties in one declaration.The properties that

can be set, are (in order): "font-style font-variant font-weight font-size/line-height font-family".

The font-size and font-family values are required. If one of the other values are missing, the

default values will be inserted, if any.

Property Values

Value Description

font-style Specifies the font style. See font-style for possible values

font-variant Specifies the font variant. See font-variant for possible values
http://w3schools.com/cssref/pr_font_font-style.asphttp://w3schools.com/cssref/pr_font_font-variant.asphttp://w3schools.com/cssref/pr_font_font-variant.asphttp://w3schools.com/cssref/pr_font_font-style.asp


33/82

font-weight Specifies the font weight. See font-weight for possible values

font-size/line-height Specifies the font size and the line-height. See font-size and line-height

for possible values

font-family Specifies the font family. See font-family for possible values

caption Uses the font that are used by captioned controls (like buttons, drop-

downs, etc.)icon Uses the font that are used by icon labels

menu Uses the fonts that are used by dropdown menus

message-box Uses the fonts that are used by dialog boxes

small-caption A smaller version of the caption font

status-bar Uses the fonts that are used by the status bar

inherit Specifies that the value of the font property should be inherited from

the parent element

Input:

Output:
http://w3schools.com/cssref/pr_font_weight.asphttp://w3schools.com/cssref/pr_font_font-size.asphttp://w3schools.com/cssref/pr_dim_line-height.asphttp://w3schools.com/cssref/pr_font_font-family.asphttp://w3schools.com/cssref/pr_font_font-family.asphttp://w3schools.com/cssref/pr_dim_line-height.asphttp://w3schools.com/cssref/pr_font_font-size.asphttp://w3schools.com/cssref/pr_font_weight.asp


34/82

19. CSS HeightPropertyDefinition and Usage

The height property sets the height of an element.

Note: The height property does not include padding, borders, or margins!

Browser Support

The height property is supported in all major browsers.

Property Values

Value Descriptionauto The browser calculates the height. This is default

length Defines the height in px, cm, etc.

% Defines the height in percent of the containing block

Input:


35/82

Output:


36/82

20. CSS @keyframesProperty

Browser Support

The @keyframes rule is not supported in any browsers. Firefox supports an alternative, the @-

moz-keyframes rule. Safari and Chrome support an alternative, the @-webkit-keyframes rule.


With the @keyframes rule, you can create animations. The animation is created by gradually

changing from one set of CSS styles to another. During the animation, you can change the set of

CSS styles many times. Specify when the change will happen in percent, or the keywords "from"

and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is

when the animation is complete. For best browser support, you should always define both the

0% and the 100% selectors.

Value Description

animationname Required. Defines the name of the animation.

keyframes-selector

Required. Percentage of the animation duration.

Legal values:

0-100%

from (same as 0%)

to (same as 100%)

Note: You can have many keyframes-selectors in one animation.

css-styles Required. One or more legal CSS style properties

Input:


37/82

21. CSS LeftPropertyBrowser Support

The left property is supported in all major browsers.


For absolutely positioned elements, the left property sets the left edge of an element to a unit

to the left/right of the left edge of its containing element.

For relatively positioned elements, the left property sets the left edge of an element to a unit to

the left/right to its normal position.

Property Values

Value Description

auto Lets the browser calculate the left edge position. This is default

length Sets the left edge position in px, cm, etc. Negative values are allowed

% Sets the left edge position in % of containing element. Negative values

are allowed

inherit Specifies that the value of the left property should be inherited from

the parent element

Input:


38/82

Output:


39/82

22. CSS Letter-spacingPropertyBrowser Support

The letter-spacing property is supported in all major browsers.


The letter-spacing property increases or decreases the space between characters in a text.

Property Values

Value Description

normal No extra space between characters. This is default

length Defines an extra space between characters (negative values are

allowed)

Input:


40/82

Output:

23. CSS Line-heightPropertyBrowser Support

The line-height property is supported in all major browsers.


The line-height property specifies the line height.

Note: Negative values are not allowed.

Property Values

Value Description

normal A normal line height. This is default


41/82

number A number that will be multiplied with the current font size to set the

line height

length A fixed line height in px, pt, cm, etc.

% A line height in percent of the current font size

Input:

Output:


42/82

24. CSS List-stylePropertyBrowser Support

The list-style-image property is supported in all major browsers.


The list-style shorthand property sets all the list properties in one declaration.The properties

that can be set, are (in order): list-style-type, list-style-position, list-style-image.If one of the

values above are missing, e.g. "list-style:circle inside;", the default value for the missing

property will be inserted, if any.

Property Values

Value Description

list-style-type Specifies the type of list-item marker. See list-style-type for possible values

list-style-position Specifies where to place the list-item marker. See list-style-position for

possible values

list-style-image Specifies the type of list-item marker. See list-style-image for possible
http://w3schools.com/cssref/pr_list-style-type.asphttp://w3schools.com/cssref/pr_list-style-position.asphttp://w3schools.com/cssref/pr_list-style-image.asphttp://w3schools.com/cssref/pr_list-style-image.asphttp://w3schools.com/cssref/pr_list-style-position.asphttp://w3schools.com/cssref/pr_list-style-type.asp


43/82

values

Inherit Specifies that the value of the list-style property should be inherited from

the parent element

Input:


44/82

Output:

25. CSS MarginPropertyBrowser Support

The margin property is supported in all major browsers.


The margin shorthand property sets all the margin properties in one declaration. This property

can have from one to four values.

Examples:

margin:10px 5px 15px 20px;o top margin is 10pxo right margin is 5pxo bottom margin is 15pxo left margin is 20px

margin:10px 5px 15px;


45/82

o top margin is 10pxo right and left margins are 5pxo bottom margin is 15px

margin:10px 5px;o top and bottom margins are 10pxo right and left margins are 5px

margin:10px;o all four margins are 10px

Note: Negative values are allowed.

Property Values

Value Description

auto The browser calculates a margin

length Specifies a margin in px, pt, cm, etc. Default value is 0px

% Specifies a margin in percent of the width of the containing

element

inherit Specifies that the margin should be inherited from the parent

element

Input:


46/82

Output:

26. CSS3 Opacity PropertyBrowser Support

The opacity property is supported in all major browsers.


The opacity property sets the opacity level for an element.

Value Description

value Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully

opaque)

inherit The value of the opacity property should be inherited from the

parent element


47/82

Input:

Output:


48/82

27. CSS OutlinePropertyBrowser Support

The outline property is supported in all major browsers.

Tips and Notes

An outline is a line around an element. It is displayed around the margin of the element.

However, it is different from the border property.

The outline is not a part of the element's dimensions, therefore the element's width and height

properties do not contain the width of the outline.


An outline is a line that is drawn around elements (outside the borders) to make the element

"stand out". The outline shorthand property sets all the outline properties in one declaration.

The properties that can be set, are (in order): outline-color, outline-style, outline-width. If one

of the values above are missing, e.g. "outline:solid #ff0000;", the default value for the missing

property will be inserted, if any.


49/82

Property Values

Value Description

outline-color Specifies the color of the outline

outline-style Specifies the style of the outline

outline-width Specifies the width of outlineinherit Specifies that the value of the outline property should be inherited


Input:

Output:
http://w3schools.com/cssref/pr_outline-color.asphttp://w3schools.com/cssref/pr_outline-style.asphttp://w3schools.com/cssref/pr_outline-width.asphttp://w3schools.com/cssref/pr_outline-width.asphttp://w3schools.com/cssref/pr_outline-width.asphttp://w3schools.com/cssref/pr_outline-style.asphttp://w3schools.com/cssref/pr_outline-color.asp


50/82

28. CSS OverflowPropertyBrowser Support

The overflow property is supported in all major browsers.


The overflow property specifies what happens if content overflows an element's box.

Property Values

Value Descriptionvisible The overflow is not clipped. It renders outside the element's box. This

is default

hidden The overflow is clipped, and the rest of the content will be invisible

scroll The overflow is clipped, but a scroll-bar is added to see the rest of the

content

auto If overflow is clipped, a scroll-bar should be added to see the rest of

the content


51/82

inherit Specifies that the value of the overflow property should be inherited


Input:

Output:


52/82

29. CSS Overflow-xy PropertyBrowser Support

The overflow-x y property is supported in all of the major browsers.

Note: The overflow-x y property does not work properly in IE8 and earlier.


The overflow-x property specifies whether or not to clip the left/right edges of the content - if it

overflows the element's content area.

Tip: Use the overflow-x -y property to determine clipping at the top and bottom edges.

Value Description

visible The content is not clipped, and it may be rendered outside the

content box

hidden The content is clipped - and no scrolling mechanism is provided

scroll The content is clipped and a scrolling mechanism is provided
http://w3schools.com/cssref/css3_pr_overflow-y.asphttp://w3schools.com/cssref/css3_pr_overflow-y.asp


53/82

auto Should cause a scrolling mechanism to be provided for

overflowing boxes

no-display If the content does not fit in the content box, the whole box is

removed

no-content If the content does not fit in the content box, the whole content

is hidden

Input:

Output:


54/82

30. CSS PaddingPropertyBrowser Support

The padding property is supported in all major browsers.


The padding shorthand property sets all the padding properties in one declaration. This

property can have from one to four values.

Examples:

padding:10px 5px 15px 20px;o top padding is 10pxo right padding is 5px


55/82

o bottom padding is 15pxo left padding is 20px

padding:10px 5px 15px;o top padding is 10pxo right and left padding are 5pxo bottom padding is 15px

padding:10px 5px;o top and bottom padding are 10pxo right and left padding are 5px

padding:10px;o all four paddings are 10px

Property Values

Value Description

length Specifies the padding in px, pt, cm, etc. Default value is 0px

% Specifies the padding in percent of the width of the containing

element

Input:


56/82

Output:


57/82

31. CSS3PerspectivePropertyBrowser Support

The perspective property is not supported in any browser.

Chrome and Safari support an alternative, the -webkit-perspecitve property.


The perspective property defines how many pixels a 3D element is placed from the view. This

property allows you to change the perspective on how 3D elements are viewed.

When defining the perspective property for an element, it is the CHILD elements that get theperspective view, NOT the element itself.

Property

Value

Description

number How many pixels the element is placed from the view

none Default value. Same as 0. The perspective is not set

Input:


58/82

Output:

32. CSS3Perspective-originPropertyBrowser Support

The perspective-origin property is not supported in any browser.

Chrome and Safari support an alternative, the -webkit-perspecitve-origin property.


The perspective-origin property defines where a 3D element is based in the x- and the y-axis.

This property allows you to change the bottom position of 3D elements.

When defining the perspective-origin property for an element, it is the CHILD elements that are

positioned, NOT the element itself.

Property

Value

Description

x-axis Defining where the view is placed at the x-axis


59/82

Possible values:

left center right length %

Default value: 50%

y-axis Defining where the view is placed at the y-axis

Possible values:

top center bottom length %

Default value: 50%

Input:


60/82

Output:

33. CSS PositionPropertyBrowser Support

The position property is supported in all major browsers.


The position property specifies the type of positioning method used for an element (static,

relative, absolute or fixed).

Property Values

Value Description


61/82

static Elements renders in order, as they appear in the document flow. This

is default.

absolute The element is positioned relative to its first positioned (not static)

ancestor element

fixed The element is positioned relative to the browser window

relative The element is positioned relative to its normal position, so "left:20"adds 20 pixels to the element's LEFT position

Input:

Output:


62/82

34. CSS QuotesPropertyBrowser Support

The quotes property is supported in all major browsers.


The quotes property sets the type of quotation marks for embedded quotations.

Property Values

Value Description

none Specifies that the "open-quote" and "close-

quote" values of the "content" property will not

produce any quotation marks

string stringstringstring Specifies which quotation marks to use. The first

two values specifies the first level of quotation


63/82

embedding, the next two values specifies the next

level of quote embedding, etc

inherit Specifies that the value of the quotes property

should be inherited from the parent element

Quotation Mark Characters

Result Description Entity Number

" double quote "

' single quote '

single, left angle quote

single, right angle quote

double, left angle quote

double, right angle quote

left quote (single high-6)

right quote (single high-9) left quote (double high-6)

right quote (double high-9)

double quote (double low-9)

Input:

Output:

35. CSS3ResizePropertyBrowser Support

The resize property is supported in Firefox 4+, Chrome, and Safari.


The resize property specifies whether or not an element is resizable by the user.

Value Description

None The user cannot resize the element

Both The user can adjust both the height and the width of the


64/82

element

horizontal The user can adjust the width of the element

Vertical The user can adjust the height of the element

Input:

Output:


65/82

36. CSS Right PropertyPropertyBrowser Support

The right property is supported in all major browsers.


For absolutely positioned elements, the right property sets the right edge of an element to a

unit to the left/right of the right edge of its containing element.

For relatively positioned elements, the right property sets the right edge of an element to a unit

to the left/right to its normal position.

Property Values

Value Description

auto Lets the browser calculate the right edge position. This is default

length Sets the right edge position in px, cm, etc. Negative values are allowed

% Sets the right edge position in % of containing element. Negative

values are allowed


66/82

Input:

Output:


67/82

37. CSS Table-layoutPropertyBrowser Support

The table-layout property is supported in all major browsers.


The table-layout property sets the table layout algorithm to be used for a table.

Property Values

Value Description

auto Automatic table layout algorithm (this is default):

The column width is set by the widest unbreakable content inthe cells

Can be slow, since it needs to read through all the content inthe table, before determining the final layout

fixed Fixed table layout algorithm:

The horizontal layout only depends on the table's width andthe width of the columns, not the contents of the cells

Allows a browser to lay out the table faster than the automatictable layout

The browser can begin to display the table once the first rowhas been received


68/82

Input:

Output:


69/82

38. CSS TopPropertyBrowser Support

The top property is supported in all major browsers.


For absolutely positioned elements, the top property sets the top edge of an element to a unit

above/below the top edge of its containing element.

For relatively positioned elements, the top property sets the top edge of an element to a unit

above/below its normal position.

Property Values

Value Description Play it

auto Lets the browser calculate the top edge position. This is default Play it

length Sets the top edge position in px, cm, etc. Negative values are allowed Play it

% Sets the top edge position in % of containing element. Negative values Play it
http://w3schools.com/cssref/playit.asp?filename=playcss_tophttp://w3schools.com/cssref/playit.asp?filename=playcss_tophttp://w3schools.com/cssref/playit.asp?filename=playcss_top&preval=50pxhttp://w3schools.com/cssref/playit.asp?filename=playcss_top&preval=50pxhttp://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top&preval=50pxhttp://w3schools.com/cssref/playit.asp?filename=playcss_top


70/82

are allowed

Input:

Output:
http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25


71/82

39. CSS3TransformPropertyBrowser Support

The transform property is not supported in any browser. Internet Explorer supports an

alternative, the -ms-transform property (2D transforms only). Firefox supports an alternative,

the -moz-transform property (2D transforms only). Opera supports an alternative, the -o-

transform property (2D transforms only). Safari and Chrome support an alternative, the -

webkit-transform property (3D and 2D transforms).


The transform property applies a 2D or 3D transformation to an element. This property allows

you to rotate, scale, move, skew, etc., elements.

Value Description

none Defines that there should be no

transformation

matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix

of six values

matrix3d

(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

Defines a 3D transformation, using a 4x4

matrix of 16 values

translate(x,y) Defines a 2D translation

translate3d(x,y,z) Defines a 3D translation

translateX(x) Defines a translation, using only the value for

the X-axis

translateY(y) Defines a translation, using only the value for

the Y-axis

translateZ(z) Defines a 3D translation, using only the value

for the Z-axisscale(x,y) Defines a 2D scale transformation

scale3d(x,y,z) Defines a 3D scale transformation

scaleX(x) Defines a scale transformation by giving a

value for the X-axis

scaleY(y) Defines a scale transformation by giving a

value for the Y-axis
http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25


72/82

scaleZ(z) Defines a 3D scale transformation by giving a

value for the Z-axis

rotate(angle) Defines a 2D rotation, the angle is specified in

the parameter

rotate3d(x,y,z,angle) Defines a 3D rotation

rotateX(angle) Defines a 3D rotation along the X-axisrotateY(angle) Defines a 3D rotation along the Y-axis

rotateZ(angle) Defines a 3D rotation along the Z-axis

skew(x-angle,y-angle) Defines a 2D skew transformation along the

X- and the Y-axis

skewX(angle) Defines a 2D skew transformation along the

X-axis

skewY(angle) Defines a 2D skew transformation along the

Y-axis

perspective(n) Defines a perspective view for a 3D

transformed elementInput:

Output:
http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25


73/82

40. CSS3TransitionPropertyBrowser Support

The transition property is not supported in any browsers.


The transition property is a shorthand property for the four transition properties:

transition-property, transition-duration, transition-timing-function, and transition-delay.

Note: Always specify the transition-duration property, otherwise the duration is 0, and the

transition will have no effect.

Value Description

transition-

property

Specifies the name of the CSS property the transition effect is for

transition-

duration

Specifies how many seconds or milliseconds the transition effect takes to

complete

transition-

timing-function

Specifies the speed curve of the transition effect

transition-delay Defines when the transition effect will start

Input:
http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/playit.asp?filename=playcss_top_percent&preval=10%25http://w3schools.com/cssref/css3_pr_transition-property.asphttp://w3schools.com/cssref/css3_pr_transition-property.asphttp://w3schools.com/cssref/css3_pr_transition-property.asphttp://w3schools.com/cssref/css3_pr_transition-duration.asphttp://w3schools.com/cssref/css3_pr_transition-duration.asphttp://w3schools.com/cssref/css3_pr_transition-duration.asphttp://w3schools.com/cssref/css3_pr_transition-timing-function.asphttp://w3schools.com/cssref/css3_pr_transition-timing-function.asphttp://w3schools.com/cssref/css3_pr_transition-delay.asphttp://w3schools.com/cssref/css3_pr_transition-delay.asphttp://w3schools.com/cssref/css3_pr_transition-delay.asphttp://w3schools.com/cssref/css3_pr_transition-timing-function.asphttp://w3schools.com/cssref/css3_pr_transition-timing-function.asphttp://w3schools.com/cssref/css3_pr_transition-duration.asphttp://w3schools.com/cssref/css3_pr_transition-duration.asphttp://w3schools.com/cssref/css3_pr_transition-property.asphttp://w3schools.com/cssref/css3_pr_transition-property.asp


74/82

Output:


75/82

41. CSS vertical-alignPropertyBrowser Support

The vertical-align property is supported in all major browsers.


The vertical-align property sets the vertical alignment of an element.

Property Values

Value Description

length Raises or lower an element by the specified length. Negative valuesare allowed

% Raises or lower an element in a percent of the "line-height" property.

Negative values are allowed

baseline Align the baseline of the element with the baseline of the parent

element. This is default

sub Aligns the element as it was subscript

super Aligns the element as it was superscript

top The top of the element is aligned with the top of the tallest element

on the line

text-top The top of the element is aligned with the top of the parentelement's font

middle The element is placed in the middle of the parent element

bottom The bottom of the element is aligned with the lowest element on the

line

text-

bottom

The bottom of the element is aligned with the bottom of the parent

element's font

Input:


76/82

Output:


77/82

42. CSS VisibilityPropertyBrowser Support

The visibility property is supported in all major browsers.


The visibility property specifies whether or not an element is visible.

Property Values

Value Description

visible The element is visible. This is default

hidden The element is invisible (but still takes up space)

collapse Only for table elements. collapse removes a row or column, but it

does not affect the table layout. The space taken up by the row or

column will be available for other content.

If collapse is used on other elements, it renders as "hidden"

Input:


78/82

Output:


79/82

43. CSS WidthPropertyBrowser Support

The width property is supported in all major browsers.


The width property sets the width of an element.

Property Values

Value Description

auto The browser calculates the width. This is defaultlength Defines the width in px, cm, etc.

% Defines the width in percent of the containing block

inherit Specifies that the value of the width property should be inherited


Input:

Output:

44. CSS White-spacePropertyBrowser Support

The white-space property is supported in all major browsers.


The white-space property specifies how white-space inside an element is handled.

Property Values


80/82

Value Description

normal Sequences of whitespace will collapse into a single whitespace. Text

will wrap when necessary. This is default

nowrap Sequences of whitespace will collapse into a single whitespace. Text

will never wrap to the next line. The text continues on the same line

until a
tag is encounteredpre Whitespace is preserved by the browser. Text will only wrap on line

breaks Acts like the tag in HTML

pre-line Sequences of whitespace will collapse into a single whitespace. Text

will wrap when necessary, and on line breaks

pre-wrap Whitespace is preserved by the browser. Text will wrap when

necessary, and on line breaks

Input:

Output:

45. CSS Word-spacingPropertyBrowser Support

The word-spacing property is supported in all major browsers.


The word-spacing property increases or decreases the white space between words.

Note: Negative values are allowed.

Property Values

Value Description

normal Defines normal space between words . This is default

length Defines an extra space between words in px, pt, cm, em, etc. Negative

values are allowed

Input:


81/82

Output:

46.

CSS3Word-breakProperty

Browser Support

The word-break property is not supported in Firefox or Opera.


The word-break property specifies line breaking rules for non-CJK scripts.

Value Description

normal Breaks non-CJK scripts according to their own rules

break-all Lines may break between any two characters for non-CJK scripts

hyphenate Words may be broken at an appropriate hyphenation point

Input:

Output:

47. CSS3Word-wrapPropertyBrowser Support

The word-wrap property is supported in all major browsers.



82/82

The word-wrap property allows long words to be able to be broken and wrap onto the next

line.

Value Description

normal Break words only at allowed break points

break-word

Allows unbreakable words to be broken

Input:

Output:

48. CSS Z-indexPropertyBrowser Support

The z-index property is supported in all major browsers.


The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Property Values

Value Description

auto Sets the stack order equal to its parents. This is default

number Sets the stack order of the element. Negative numbers are

allowed

CSS3 Animation Property

Documents

Transcript of CSS3 Animation Property