Transitions and animations are important parts of CSS3, so I have time today to learn about them and write them down. Before we begin, let’s look at the TRANSFORMATION of CSS3.

conversion

The transformation of CSS3 is divided into the following types:

  • Translate the mobile
  • The rotate rotating
  • Scale zooming
  • Skew tilt
  • Matrix mixed

There is also a 3D version of each transformation

Note: Closed inline elements do not support transformations, transitions, and animations: e.g. <span>, <small>, < I >, etc. You can convert to block-level elements by adding styles display: inline-block or display: block.

Translate the mobile

The Translate () method moves from the current element position based on the parameters given at the left (X-axis) and top (Y-axis) positions.

span { display: inline-block; transform: translate(50px,100px); /* Move 50 pixels down,100 pixels right */ -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ }Copy the code

The rotate rotating

The rotate() method, which rotates the element clockwise at a given degree. Negative values are allowed, so the element rotates counterclockwise.

i { display: block; transform: rotate(30deg); Rotate: rotate(30deg); rotate: rotate(30deg); rotate: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ }Copy the code

Scale zooming

The scale() method, which increases or decreases the size of the element, depending on the width (X-axis) and height (Y-axis) parameters:

div { display: inline; /* transform: scale(2,3); -ms-transform:scale(2,3); -ms-transform:scale(2,3); /* webkit-transform: scale(2,3); /* Safari */ transform: scale(3); /* Standard syntax */}Copy the code

Skew tilt

Skew () contains two parameters, indicating the tilt Angle of the X and Y axes. If the second parameter is empty, the default value is 0. If the second parameter is negative, it indicates the tilt in the opposite direction. (Think of it as a straight pillar, pushed sideways…)

  • skewX(); It only tilts in the X direction. (Pushed sideways…)
  • skewY(); It only tilts in the Y direction. (Pushed sideways from up and down…)
div {
    transform: skew(30deg,20deg);
    -ms-transform: skew(30deg,20deg); /* IE 9 */
    -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
Copy the code

Matrix mixed

The matrix() method and the 2D transform method are combined into one. The Matrix method has six parameters, including rotation, scaling, move (pan) and tilt functions.

Div {the transform matrix (0.866, 0.5, 0.5, 0.866, 0, 0). - ms - the transform matrix (0.866, 0.5, 0.5, 0.866, 0, 0). / * * / 9 - IE its - transform: matrix (0.866, 0.5, 0.5, 0.866, 0, 0). /* Safari and Chrome */ }Copy the code

Screenshots to summarize

The 2 d version

The transition transition

In CSS3, we can change from one style to another to add an effect without using Flash animation or JavaScript.

The difference between transitions and animation

Transitions and animations can both change the style of an element, but there are some differences between them:

  • Transitions from one style to another for the style attributes of an element, styles change over time on a Bezier curve, and animations change the style effect of the element by keyframe for the element itself
  • Transitions are simpler than animations, and while the effects of controls are also rougher, animations consume more performance, but can make more complex effects.

In summary: generally simple styles use transitions, really need complex effects to consider using animation

The transition properties

div { transition-property: width; /* Transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Safari */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; } /* / div {transition: width 1s linear 2s; /* Safari */ -webkit-transition:width 1s linear 2s; }Copy the code

Transition curve

The animate animated

CSS3, we can create animations, it can replace many web animated images, Flash animations, and JAVAScripts. Animation properties:

Animation process

1. Create animations using the @keyframes rule

@keyframes changeColor {from {color: red; } to { color: blue; }}Copy the code

2. Element binding animation

span { display: inline-block; /* Animation: changeColor 1s linear; /* Bind the animation and set the animation time and execution curve */}Copy the code

Animations can also use percentages to fine-tune the animation flow:

@keyframes changeColor { 0% {color: red; } 25% {color: yellow; } 50% {color: green; } 75% {color: pickle; } 100% {color: blue; }} @-webkit-keyframes changeColor {0% {color: red; } 25% {color: yellow; } 50% {color: green; } 75% {color: pickle; } 100% {color: blue; }}Copy the code