Some properties of CSS3

Have not been aware of some CSS properties, recently found some styles are very useful, now tidy up again.

CSS3 Animation Properties

@keyframes: Specify animation

You can change the style of a block by keyframes of course this is to be combined with the animation property

@keyframes Mymove (Mymove must define the name of the animation in) {0%   /* Firefox */{0%   /* Safari and Chrome */{0%/   * Opera */{0%   {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;}}



Animation: Binding an animation to an element

The animation property is a shorthand property for setting six animation properties:

• Animation-name {Specifies the keyframe name to bind to the selector

}

• Animation-duration (Specifies the time taken to complete the animation, in seconds or milliseconds : Specifies the time it takes to complete the animation. The default value is 0, meaning there is no animation effect)
• animation-timing-function{

Speed curve for specified animation

Linear: Animation is the same speed from beginning to end

Ease: Default. The animation starts at low speed, then accelerates and slows down before it ends.

Ease-in: Animations start at low speed

Ease-out: Animation ends at low speed

Ease-in-out: Animations start and end at low speed

}

• animation-delay{

Specify the delay before the animation starts

Time : Optional. Defines the time, in seconds or milliseconds, to wait before the animation starts. The default value is 0

}

• animation-iteration-count{

Specify the number of times an animation should play

N: Defines the number of times the animation plays

Infinite: Specifies that animations should be played infinitely

}

• animation-direction{

Specifies whether the animation should be rotated in reverse

Normal: Default value. The animation should play normally,

Alternate: animations should rotate backwards

}

• animation-play-state{

Specifies whether the animation is running or pausing animation-play-state:paused|running;

Paused: Specifies that animation is paused

Running: Specifies that the animation is playing

}

• animation-fill-mode{

The Animation-fill-mode:none property specifies whether animations are visible before or after the animation is played | forwards | backwards | both;

None: Do not change the default behavior

Forwards: When the animation is complete, keep the last property value (defined in the last Keyframe)

Backwards: Applies the start attribute value (defined in the first keyframe) for a period of time specified by Animation-delay before the animation is displayed

Both: both forward and backward fill modes are applied

}

/* Safari and Chrome */}

CSS Background Properties

Background setting all background properties in a declaration

background: #00FF00 URL (bgimage.gif) red no-repeat fixed top;

• Background-color (Specifies the background color to use)
• Background-position (Specify the location of the background image)
• Background-size (Specify the size of the background image)
• Background-repeat (Specifies how to repeat the background image)
• Background-origin (Specify the location area of the background image)
• Background-clip (drawing area with specified background)
• Background-attachment (Specifies whether the background image is fixed or scrolls along with the rest of the page)
• Background-image (Specifies the background image to use)

CSS Border Properties

• border: sets all the border properties in a declaration.
• Border-bottom: Set all the bottom border properties in a declaration
• Border-bottom-color: Sets the color of the bottom border
• Border-bootom-style: Sets the style of the bottom border
• Border-bottom-width: Sets the width of the bottom border
• Border-color: Sets the color of four borders
• Border-left: Set all left border properties in a declaration
• Border-left-color: Sets the color of the left border
• ..... And Border-top,border-right are all the same. The difference between the upper and lower border of the effect
• Outline: Set all profile properties in a declaration
• Outline-color: Set the color of the outline
• Outline-style: Setting the style of the outline
• Outline-width: Set Contour Width
• Border-bottom-left-radius: Defines the shape at the bottom left corner of the border
• Border-bottom-right-radius: Defines the shape in the lower-right corner of the border
• Border-image: Shorthand property, setting all border-image-* properties
• Border-image-outset: Specifies the amount of border image area beyond the border
• Border-image-repeat: Whether the image border should be tiled (repeated), covered (rounded), or stretched (stretched)
• Border-image-slice: Specifies the inward offset of the image border
• Border-image-source: Specifies a picture to use as a border
• Border-image-width: Specifies the width of the picture border
• Border-radius: Shorthand property, setting all four Border-*-radius properties
• Box-shadow: Add one or more shadows to a box

Box property

• Overflow-x: If content overflows the element content area, whether to crop the left/right edge of the content
• Overflow-y: Whether the top/bottom edge of the content is cropped if the content overflows the element content area
• Overflow-style: The preferred scrolling method for the specified overflow element
• Rotation: Rotates an element around a point defined by the Rotation-point property
• Rotation-point: Defines the offset from the edge of the left border on the distance

Color Property

• Color-profile: Allow use of source color profiles other than the default specification
• Opacity: A specification other than the default that allows rendering intent using color profiles
• Rendering-intent: The preferred scrolling method for the specified overflow element

CSS Dimension Properties

• height:{

Set element height

Auto: Default. The browser calculates the actual height

Length: Define height using px, CM and other units

%: percent height based on the block-level object that contains it

Inherit: Specifies that the value of the height property should be inherited from the parent element

}

• Max-height: Setting the maximum height of an element
• Max-width: Sets the maximum width of an element
• Min-height: Sets the minimum height of an element
• Min-width: Sets the minimum width of an element
• Width: Sets the widths of elements

Scalable Box Properties

• box-align:{

Specifies how to align the child elements of the box-align:start|end|center|baseline|stretch box;

Start: For the normal direction of the box, the top edge of each child element is placed along the edge of the box, and for the counter-directional box, the lower edge of each child element is placed along the bottom of the box

End: For normal-orientation boxes, the lower edge of each child element is placed along the bottom of the box, and for the counter-direction box, the top edge of each child element is placed along the edge of the box

Center: Divide the extra space equally, half on the child element, and the other half below the child element

Baseline: If Box-orient is inline-axis or horizontal, all child elements are aligned with their baselines

Stretch: Stretching child element to fill the containing block

}

• Box-direction: The display direction of the child elements of the specified box
• Box-flex: Specifies whether the child elements of the box are scalable
• Box-flex-group: Assigning a scalable element to a flexible grouping
• Box-lines: Specifies whether line wrapping is displayed when the space of the parent element box is exceeded
• Box-ordinal-group: The order in which child elements of a specified box are displayed
• Box-orient: Specifies whether the child elements of the box should be arranged horizontally or vertically
• Box-pack: Specifies the horizontal position in the horizontal box or the vertical position in the vertical box

CSS Font Properties

• Color-profile: Allow use of source color profiles other than the default specification
• Opacity: A specification other than the default that allows rendering intent using color profiles
• Rendering-intent: The preferred scrolling method for the specified overflow element

Content generation

• Content: Used in conjunction with: Before and: After pseudo-elements to insert the generated content
• Conunter-increment: Increments or decrements one or more counters
• Conunter-reset: Create or reset one or more counters
• Quotes: Set quotation marks type for nested references

Grid Properties

• Grid-columns: Specifies the width of each column in the grid
• Grid-rows: Specifies the height of each column in the grid

Hyperlink property

• Grid-columns: Specifies the width of each column in the grid
• Grid-rows: Specifies the height of each column in the grid

CSS Property lists (list)

• List-style: Set all list properties in a declaration
• List-style-image: Set the image as a list item marker
• List-style-position: Sets the placement position of the list item marker
• List-style-type: Setting the type of the list item marker

Some properties of CSS3