css--Animation (transform, transition, animation)

Transform

• Static properties, once written into the style, will immediately display the function without any change in process. (similar to left, right, top, bottom such attributes)
• Mainly used to make the deformation of the elements
• There are five main properties that change the style of an element:
  • Translate3d (x, Y, z) controls where elements are positioned on the three axes of a page
  • Rotate (10deg) is used to control the angle of rotation of the element (degree deg)
  • Skewx,y production tilt, 2d create the necessary properties for 3d perspective
  • Scale3d (2, 1.5,-6) is used to zoom in and out, the attribute is the ratio
  • Matrix3D css matrix, not commonly used
• Instance

.demo{    -webkit-transform: rotate(360deg) skew(-20deg) scale(3) translate(100px, 0);}

Transition:transition-property transition-duration transition-timing-function Transition-delay;

• Animated properties that allow the CSS property values to transition smoothly within a certain time interval
• The main four properties are as follows:
  • Transition-property:none (no attribute changes) | All (property changed) | indent (element attribute name)
  • transition-duration:500ms; Specify the duration of the element conversion process
  • Transition-timing-function:linear (constant speed) | Ease (slowly slowing down) | Ease-in (Acceleration) | Ease-out (deceleration) | Ease-in-out (accelerate and slow down first);
  • transition-delay:0.3s; How long after the Hundred-element attribute value begins to perform the transition effect
• Instance

a{    transition : background .5s  ease-in, color .3s ease-out;    transition : transform .4s ease-in-out;}

Animation

+ animate elements, need to work with @keyframes, convert a set of CSS styles to another set of styles

• If you consider compatibility, you need to add-webkit-,-o-,-Ms-,-moz-, etc.
• @keyframes timeline and keyframes similar to flash
  @keyframes animationname{
  Keyframes-selector {//recommended with 0~100%,from (0), to (100%)
  Css-styles;
  }
  }
• Instance

.load-border{    width: 100px;    height:100px;    background: url(‘a.png‘) no-repeat center center;    -webkit-animation : gif 1.4s infinite linear;    animation: gif 1.4s infinite linear;}@keyframes gif{     0% {        -webkit-transform: rotate(0deg);        transform: rotate(0deg);    }    100%{        -webkit-transform: rotate(360deg);        transform: rotate(360deg);        width:200px;    }}

Reference Links:
MDN | Transition excessive
SF | CSS3 Animation Properties Transform, transition, animation

css--Animation (transform, transition, animation)