css3 animation property
TRANSCRIPT
-
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 -
8/2/2019 CSS3 Animation Property
2/82
Input:
Output:
-
8/2/2019 CSS3 Animation Property
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.
Definition and Usage
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:
-
8/2/2019 CSS3 Animation Property
4/82
Output:
-
8/2/2019 CSS3 Animation Property
5/82
3.CSS3 backface-visibility Property
Browser Support
The backface-visibility property is only supported in Safari.
Definition and Usage
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:
-
8/2/2019 CSS3 Animation Property
6/82
4.CSS3 Background Property
Browser Support
The background property is supported in all major browsers.
Definition and Usage
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 -
8/2/2019 CSS3 Animation Property
7/82
Output:
-
8/2/2019 CSS3 Animation Property
8/82
5.CSS3 Border PropertyBrowser Support
The border property is supported in all major browsers.
Definition and Usage
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 -
8/2/2019 CSS3 Animation Property
9/82
Output:
-
8/2/2019 CSS3 Animation Property
10/82
6.CSS3 Bottom PropertyBrowser Support
The bottom property is supported in all major browsers.
Definition and Usage
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:
-
8/2/2019 CSS3 Animation Property
11/82
Output:
-
8/2/2019 CSS3 Animation Property
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.
Definition and Usage
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 -
8/2/2019 CSS3 Animation Property
13/82
Output:
-
8/2/2019 CSS3 Animation Property
14/82
8.CSS3 Clear PropertyBrowser Support
The clear property is supported in all major browsers.
Definition and Usage
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:
-
8/2/2019 CSS3 Animation Property
15/82
Output:
9. CSS3 Color PropertyBrowser Support
-
8/2/2019 CSS3 Animation Property
16/82
The color property is supported in all major browsers.
Definition and Usage
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 -
8/2/2019 CSS3 Animation Property
17/82
10. CSS3 ColumnsPropertyBrowser Support
The columns property is only supported in Opera. Safari and Chrome support an alternative, the
-webkit-columns property.
Definition and Usage
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 -
8/2/2019 CSS3 Animation Property
18/82
Output:
-
8/2/2019 CSS3 Animation Property
19/82
11. CSS3 Content PropertyBrowser Support
The content property is supported in all major browsers.
Definition and Usage
The content property is used with the :before and :after pseudo-elements, to insert generated
content.
Input:
Output:
-
8/2/2019 CSS3 Animation Property
20/82
12. CSS3 Counter-increamentPropertyBrowser Support
The counter-increment property is supported in all major browsers.
Definition and Usage
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.
-
8/2/2019 CSS3 Animation Property
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:
-
8/2/2019 CSS3 Animation Property
22/82
13. CSS3 CursorPropertyBrowser Support
The cursor property is supported in all major browsers.
Definition and Usage
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
-
8/2/2019 CSS3 Animation Property
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
from the parent element
Input:
-
8/2/2019 CSS3 Animation Property
24/82
Output:
14. CSS3 DirectionPropertyBrowser Support
The direction property is supported in all major browsers.
Definition and Usage
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:
-
8/2/2019 CSS3 Animation Property
25/82
Output:
-
8/2/2019 CSS3 Animation Property
26/82
15. CSS3 DisplayPropertyBrowser Support
The display property is supported in all major browsers.
Definition and Usage
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 )
-
8/2/2019 CSS3 Animation Property
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
from the parent element
Input:
-
8/2/2019 CSS3 Animation Property
28/82
Output:
-
8/2/2019 CSS3 Animation Property
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:
-
8/2/2019 CSS3 Animation Property
30/82
Output:
17. CSS3 FloatPropertyBrowser Support
The float property is supported in all major browsers.
Definition and Usage
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
-
8/2/2019 CSS3 Animation Property
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:
-
8/2/2019 CSS3 Animation Property
32/82
18. CSS3 FontProperty
Browser Support
The font property is supported in all major browsers.
Definition and Usage
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 -
8/2/2019 CSS3 Animation Property
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 -
8/2/2019 CSS3 Animation Property
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:
-
8/2/2019 CSS3 Animation Property
35/82
Output:
-
8/2/2019 CSS3 Animation Property
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.
Definition and Usage
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:
-
8/2/2019 CSS3 Animation Property
37/82
21. CSS LeftPropertyBrowser Support
The left property is supported in all major browsers.
Definition and Usage
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:
-
8/2/2019 CSS3 Animation Property
38/82
Output:
-
8/2/2019 CSS3 Animation Property
39/82
22. CSS Letter-spacingPropertyBrowser Support
The letter-spacing property is supported in all major browsers.
Definition and Usage
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:
-
8/2/2019 CSS3 Animation Property
40/82
Output:
23. CSS Line-heightPropertyBrowser Support
The line-height property is supported in all major browsers.
Definition and Usage
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
-
8/2/2019 CSS3 Animation Property
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:
-
8/2/2019 CSS3 Animation Property
42/82
24. CSS List-stylePropertyBrowser Support
The list-style-image property is supported in all major browsers.
Definition and Usage
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 -
8/2/2019 CSS3 Animation Property
43/82
values
Inherit Specifies that the value of the list-style property should be inherited from
the parent element
Input:
-
8/2/2019 CSS3 Animation Property
44/82
Output:
25. CSS MarginPropertyBrowser Support
The margin property is supported in all major browsers.
Definition and Usage
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;
-
8/2/2019 CSS3 Animation Property
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:
-
8/2/2019 CSS3 Animation Property
46/82
Output:
26. CSS3 Opacity PropertyBrowser Support
The opacity property is supported in all major browsers.
Definition and Usage
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
-
8/2/2019 CSS3 Animation Property
47/82
Input:
Output:
-
8/2/2019 CSS3 Animation Property
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.
Definition and Usage
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.
-
8/2/2019 CSS3 Animation Property
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
from the parent element
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 -
8/2/2019 CSS3 Animation Property
50/82
28. CSS OverflowPropertyBrowser Support
The overflow property is supported in all major browsers.
Definition and Usage
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
-
8/2/2019 CSS3 Animation Property
51/82
inherit Specifies that the value of the overflow property should be inherited
from the parent element
Input:
Output:
-
8/2/2019 CSS3 Animation Property
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.
Definition and Usage
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 -
8/2/2019 CSS3 Animation Property
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:
-
8/2/2019 CSS3 Animation Property
54/82
30. CSS PaddingPropertyBrowser Support
The padding property is supported in all major browsers.
Definition and Usage
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
-
8/2/2019 CSS3 Animation Property
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:
-
8/2/2019 CSS3 Animation Property
56/82
Output:
-
8/2/2019 CSS3 Animation Property
57/82
31. CSS3PerspectivePropertyBrowser Support
The perspective property is not supported in any browser.
Chrome and Safari support an alternative, the -webkit-perspecitve property.
Definition and Usage
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:
-
8/2/2019 CSS3 Animation Property
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.
Definition and Usage
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
-
8/2/2019 CSS3 Animation Property
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:
-
8/2/2019 CSS3 Animation Property
60/82
Output:
33. CSS PositionPropertyBrowser Support
The position property is supported in all major browsers.
Definition and Usage
The position property specifies the type of positioning method used for an element (static,
relative, absolute or fixed).
Property Values
Value Description
-
8/2/2019 CSS3 Animation Property
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:
-
8/2/2019 CSS3 Animation Property
62/82
34. CSS QuotesPropertyBrowser Support
The quotes property is supported in all major browsers.
Definition and Usage
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
-
8/2/2019 CSS3 Animation Property
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.
Definition and Usage
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
-
8/2/2019 CSS3 Animation Property
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:
-
8/2/2019 CSS3 Animation Property
65/82
36. CSS Right PropertyPropertyBrowser Support
The right property is supported in all major browsers.
Definition and Usage
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
-
8/2/2019 CSS3 Animation Property
66/82
Input:
Output:
-
8/2/2019 CSS3 Animation Property
67/82
37. CSS Table-layoutPropertyBrowser Support
The table-layout property is supported in all major browsers.
Definition and Usage
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
-
8/2/2019 CSS3 Animation Property
68/82
Input:
Output:
-
8/2/2019 CSS3 Animation Property
69/82
38. CSS TopPropertyBrowser Support
The top property is supported in all major browsers.
Definition and Usage
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 -
8/2/2019 CSS3 Animation Property
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 -
8/2/2019 CSS3 Animation Property
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).
Definition and Usage
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 -
8/2/2019 CSS3 Animation Property
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 -
8/2/2019 CSS3 Animation Property
73/82
40. CSS3TransitionPropertyBrowser Support
The transition property is not supported in any browsers.
Definition and Usage
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 -
8/2/2019 CSS3 Animation Property
74/82
Output:
-
8/2/2019 CSS3 Animation Property
75/82
41. CSS vertical-alignPropertyBrowser Support
The vertical-align property is supported in all major browsers.
Definition and Usage
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:
-
8/2/2019 CSS3 Animation Property
76/82
Output:
-
8/2/2019 CSS3 Animation Property
77/82
42. CSS VisibilityPropertyBrowser Support
The visibility property is supported in all major browsers.
Definition and Usage
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:
-
8/2/2019 CSS3 Animation Property
78/82
Output:
-
8/2/2019 CSS3 Animation Property
79/82
43. CSS WidthPropertyBrowser Support
The width property is supported in all major browsers.
Definition and Usage
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
from the parent element
Input:
Output:
44. CSS White-spacePropertyBrowser Support
The white-space property is supported in all major browsers.
Definition and Usage
The white-space property specifies how white-space inside an element is handled.
Property Values
-
8/2/2019 CSS3 Animation Property
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 linebreaks 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.
Definition and Usage
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:
-
8/2/2019 CSS3 Animation Property
81/82
Output:
46.
CSS3Word-breakProperty
Browser Support
The word-break property is not supported in Firefox or Opera.
Definition and Usage
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.
Definition and Usage
-
8/2/2019 CSS3 Animation Property
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.
Definition and Usage
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