Animations in CSS3, animation, transition, and transform attributes

CSS3 in the use of animation properties, can not be used for JavaScript and animation, the use of good, can do a lot of beautiful effect, recently, to explore the use of animation, do a few demo play

Introduction to the Animation property

The animation property can change the position of the element and various CSS properties

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

• Animation-name the name of the keyframe that needs to be bound to the selector (defined by @keyframe below)
• Animation-duration specifies the time taken to complete an animation, in S or MS units (speed)
• Animation-timing-function the speed curve (linear|ease|ease-in|ease-out|ease-in-out| and other curves) of the specified animation
• Animation-delay the delay before the start of the animation (s, can be negative, negative indicates that the 2s animation starts over the front, which starts directly from the first 2 seconds of the animation)
• ANIMATION-ITERATION-COUNT specifies the number of times the animation should play (default 1, number of times to fill, and Infinite unlimited)
• Animation-direction Specifies whether the animation should be rotated in reverse (default normal, and alternate means that it can play back and forth)

Creating animations

Above the Animation-name property, you need to fill in a custom animation name, which requires us to create an animation. In CSS3, use the @keyframes rule to create the animation. However, it is important to note that the current browser does not support @keyframes, so when used, it should be written in the following form:

• @keyframes +name
• @-moz-keyframes+name ——— Firefox
• @-o-keyframes+name ————-Opera
• @-webkit-keyframes+name--safari and Chrome

Definition and usage

• By @keyframes rules, you can create animations.
• The animation is created by gradually changing one set of CSS styles to another.
• The time at which the change occurs is specified as a percentage, or by the keyword "from" and "to", equivalent to 0% and 100%.
• 0% is the start time of the animation, and the end time of the 100% animation.
• For best browser support, you should always define the 0% and 100% selectors.
  Note: Use the animation properties to control the appearance of the animation, while binding the animation to the selector.

For example:

//Here I only wrote one, actually note that different browsers support different, the same mymove to be defined in different keyframes format multiple times@keyframes mymove{0% {Top:0px;  Left:0px; background: red;}25% {Top:0px;  Left:+ px; background: Blue;}50% {Top:+ px;  Left:+ px; background: yellow;}75% {Top:+ px;  Left:0px; background: Green;}100% {Top:0px;  Left:0px; background: red;}}

——————————————————— – I'm a split line ————————————————————-

Introduction to the Transition property

The transition property is used for smooth transitions, and when changing various CSS properties in hover or click, the transition is smooth rather than instantaneous

The Transition property is a shorthand property for setting four transition properties:

• Transition-property the name of the CSS property to transition (it can also be none, neither; and all, which is the transition of all properties)
• Transition-duration time required to complete the transition, s or MS
• Transition-timing-function speed curve for transition effects (linear|ease|ease-in|ease-out|ease-in-out| with other curves)
• Transition-delay delay before the transition begins

However, it is important to note that in order to meet the support of different browsers, the following form should be written:

Div{width:+ px;Height:+ px;background: Blue;//Change the width to change the linear change within 2s delay after 1s changetransition: Width 2s linear 1s;-moz-transition: Width 2s linear 1s; / * Firefox 4 * /-webkit-transition: Width 2s linear 1s; / * Safari and Chrome * /-o-transition: Width 2s linear 1s; / * Opera * /}Div: Hover{width:+ px;}

——————————————————— – I'm a split line ————————————————————-

Introduction to the Transform property

The transform attribute refers to transformations, including stretching, compressing, rotating, offsetting, and so on.
The transform is divided into 2D conversion and 3D conversion, below respectively.

2D Conversion of Transform:

• Translate (left (px), top (px)) offset: Change position with two parameters
• Rotate (clockwise rotation angle (deg)) Rotation: angle can be negative, this means counterclockwise rotation
• Scale (X-axis scaling, y-axis scaling): Zoom, 1 is constant, 0.5 is shrunk to half, and 2 is twice times
• Skew (flip the horizontal flip angle (deg) along the x-axis: Flip the angle vertically along the y-axis (deg)) Note the difference between rotation and rollover
• Matrix () This method puts all of the 2D conversion methods together, which involves the conversion of matrices, the following is a simple conclusion:
  1.matrix () do offset
  Matrix (n,n,n,n, horizontal offset distance (i.e. translate-left), vertical offset distance (i.e. translate-top))
  2.matrix () do rotation
  Matrix (cosθ, sinθθ,-sinθ, cosθ, N, N)
  Rotate (θdeg) is a much simpler way to rotate.
  3. See the Great God's blog for more details.

However, it is important to note that in order to meet the support of different browsers, the following form should be written:

Div{ transform: skew (deg, deg)  ; -ms-transform: skew (deg, deg)  ;/ * IE 9 * / -webkit-transform: skew (deg, deg)  ;/ * Safari and Chrome * / -o-transform: skew (deg, deg)  ;/ * Opera * / -moz-transform: skew (deg, deg)  ;/ * Firefox * /}

3D Conversion of Transform:

• Rotatex (rotation angle (deg)) rotates horizontally (middle horizontal)
• Rotatey (rotation angle (deg)) rotation in the vertical direction (perpendicular bisector)

Animations in CSS3, animation, transition, and transform attributes