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
}
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
}
Specifies whether the animation should be rotated in reverse
Normal: Default value. The animation should play normally,
Alternate: animations should rotate backwards
}
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
}
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
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
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