Detailed explanation of CSS3 animation and new features of HTML5

1. CSS3 animation

☺CSS3 animations are much easier and perform better than dynamically changing element styles via JavaScript. There are three animation properties in CSS3: transform , transition and animation .
1. Transform
transform is mainly used to change the shape of elements: rotate , scale , skew , translate and matrix .
example:

.transform-class {
    transform: rotate(30deg) scale(2,3);
}

1.1. transform-origin base point All transformations are based on the base point, which defaults to the center point of the element. Usage: transform-origin:(x,y) , X, Y can be percentage, px, rem, or left, right, center (X) and top, center, bottom (Y).
example:

.transform-class {
    transform-origin: (left, bottom);
}

1.2. rotate rotates the element by the specified angle. If it is a positive number, it rotates clockwise, and if it is a negative number, it rotates counterclockwise.
example:

.transform-rotate {
    transform: rotate(30deg);
}

1.3. Scale
There are three ways to use scale : scale(x,y) , scaleX(x) , and scale(Y) . If the zoom ratio is greater than 1, it is enlarged, if it is equal to 1, it is the original size, and if it is less than 1, it is reduced.
example:

.transform-scale {
    transform: scale(2,1.5);
}

.transform-scaleX {
    transform: scaleX(2);
}

.transform-scaleY {
    transform: scaleY(1.5);
}

1.4. Translate
There are three cases translate : translate(x,y) , translateX(x) , translateY(y) .
example:

.transform-translate {
    transform: translate(400px, 20px);
}

.transform-translateX {
    transform: translateX(300px);
}

.transform-translateY {
    transform: translateY(20px);
}

1.5. Skew distortion
There are three ways to write skew : skew(xdeg,ydeg) , skewX(xdeg) , skewY(ydeg) , where the unit deg is the angle.
example:

.transform-skew {
    transform: skew(30deg, 10deg);
}

.transform-skewX {
    transform: skewX(30deg);
}

.transform-skewY {
    transform: skewY(10deg);
}

1.6, matrix
Brief matrix details
2. Transition
transition is used to set how an element smoothly transitions from one state to another:

• transition-property
• transition-duration
• transition-timing-function (rate of transition)
• transition-delay

3. animation
animation is similar to the frame-by-frame animation in Flash, just like the playback of a movie, it is very delicate and flexible. A transition only specifies a start and end state. Frame-by-frame animation is composed of keyframes. The continuous playback of many keyframes constitutes an animation. In CSS3, the keyframes attribute is used to complete frame-by-frame animation.
@keyframes

• animationName: animation name (name it yourself)
• percentage: percentage value [pəˈsentɪdʒ]
• properties: style property name (color, left, etc.)
  

example:

@keyframes animationName {
   from {
       properties: value;
   }
   percentage
       properties: value;
   }
   to {
       properties: value;
   }
}
//or
@keyframes animationName {
   0% {
       properties: value;
   }
   percentage
       properties: value;
   }
   100% {
       properties: value;
   }
}

2. New Features of H5

1. Used for drawing canvas elements.
2. Video and audio elements for media playback.
3. Local offline storage to localStorage stores data for a long time, and the data is not lost after the browser is closed; the data in sessionStorage is automatically deleted after the browser is closed.
4. (新標簽) Better semantic content elements

Form controls: calendar, date, time, email, url, search.

(選擇器)

This is the end of this article about CSS3 animation and HTML5 new features. For more relevant CSS3 animation and HTML5 new features content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!