preface

For just learning CSS when I, often confused about these attributes, because it is not often used, so every time to use it, you need to go back to 100 degrees to see what these attributes are, so here is the induction.

attribute describe
Animation Sets the animation property, which can be used to specify one or more groups of animations separated by commas.
Transition Sets the transition style of the element
Transform What does the animation that is used to rotate, scale, move, or tilt an element have to do with setting the style
Translate (move) Translate is an attribute value of transform, that is, move.
Translate in HTML5 is used to specify whether or not element content should be translated
<p translate="no"> </p> <p> This paragraph can be translated into any language. </p>Copy the code

animation

This property is officially described as an extension of transition.

attribute describe
@keyframes Specify animation mode
animation Sets the shorthand properties for all animation properties
animation-delay Specifies the delay for the start of animation
animation-direction Specifies whether the animation should play forward, backward, or alternate
animation-duration Specifies how long an animation should take to complete a cycle
animation-fill-mode Specifies the style of the element when no animation is played (before, after, or both)
animation-iteration-count Specifies the number of times an animation should play
animation-name Specifies the name of the @keyframes animation.
animation-play-state Specifies whether the animation is running or paused.
animation-timing-function Specifies the speed curve of the animation.
Property shorthand: Animation: Duration timing-function delay iteration-count direction fill-mode fill-mode Play-state (whether the animation is running or paused);

Practice:

.item {
  color: white;
  float: left;
  margin-right: 2%;
}

.content {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

.cylon_eye {
  background-color: rgb(162.0.255);
  background-image: linear-gradient(to right,
      rgba(0.0.0.9.) 25%,
      rgba(0.0.0.1.) 50%,
      rgba(0.0.0.9.) 75%);
  color: white;
  height: 100%;
  width: 20%;
  
          animation:yao 4s linear 0s infinite alternate ;
}

        @keyframes yao { from { margin-left: -20%; } to { margin-left: 100%; }}Copy the code
   
    <div class="content">
        <div class="item">
         瑶
        </div>
        <div class="cylon_eye"></div>
      </div>
Copy the code

transition

A transition, literally, is the transition of an element from one value of this attribute (color) (red) to another value of this attribute (color) (green), a transition of state that requires a condition to trigger the transition, For example, we usually use hover, :focus, : Checked, media queries or JavaScript. Here is a summary of these attributes:

attribute describe
transition-property Specifies the name of the CSS property that sets the transition effect
transition-duration Specifies how many seconds or milliseconds it takes to complete the transition effect
transition-timing-function The speed curve specifying the speed effect
transition-delay Define when transition effects begin
Transition: Property duration timing-function delay;

Practice:

  .test{
    height: 100px;
    width: 100px;
    font-size: 20px;
    background-color: pink;
    // The transition time is 3 seconds
    transition-duration: 3s;
    // All attributes get CSS effects
    transition-property: all;
    // Slow start transition effect
    transition-timing-function: ease-in;
    // The transition will begin in two seconds
    transition-delay: 2s;
}    
.test:hover{
    width: 500px;
    font-size: 80px;

}
Copy the code
<div class="test"></div>
Copy the code

transform

The transform property applies 2D or 3D transformations to elements. This property allows you to rotate, scale, move, or tilt elements.

attribute meaning
none Definition does not transform.
matrix(n,n,n,n,n,n) Define a 2D transformation using a matrix of six values.
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Define a 3D transformation using a 4×4 matrix of 16 values.
translate(x,y) Defining 2D transformations
translate3d(x,y,z) Defining 3D transformations
translateX(x) Define the transformation, just using the X-axis values.
translateY(y) Define the transformation, just using the Y-axis value.
translateZ(z) Define the 3D transformation using only the z-axis values
scale(x,y) Define 2D scale transformations
scale3d(x,y,z) Define the 3D zoom transformation
scaleX(x) Define the scale transformation by setting the value of the X axis
scaleY(y) Define the scale transformation by setting the Y-axis value
scaleZ(z) Define the scale transformation by setting the z-axis value
rotate(angle) Define 2D rotation, specifying angles in parameters
rotate3d(x,y,z,angle) Define 3D rotation
rotateX(angle) Defines a 3D rotation along the X axis
rotateY(angle) Define 3D rotation along the Y-axis
rotateZ(angle) Define 3D rotation along the Z axis
skew(x-angle,y-angle) Defines 2D skew conversions along the X and Y axes
skewX(angle) Defines a 3D tilt transformation along the X axis
skewY(angle) Define a 2D tilt transformation along the Y-axis
perspective(n) Define perspective views for 3D transformation elements
The rotateX(a) function is the same as rotate3d(1,0,0,a)

practice

ul{
    position:relative;
    height:300px;
    width:300px;
    list-style:none;
    margin:100px auto;
    transform-style:preserve-3d;
    /* name, animation takes 4 seconds to complete, animation starts at low speed and ends at low speed, animation delay interval is 0, animation playback is not limited */
    animation:yao 4s ease-in-out 0s infinite;
  }
  li{
    position:absolute;
    height:300px;
    width:300px;
    font-size:5em;
    text-align:center;
    line-height:300px;
   
  }
  li:nth-child(1){
    background-color: pink;
    transform: translateZ(150px); 
  }
  li:nth-child(2){
    background-color:yellow;
    transform: rotateY(90deg) translateZ(150px);
  }
  li:nth-child(3){
    background-color:orange;
    transform: rotateX(90deg) translateZ(150px);
  }
  li:nth-child(4){
    background-color:cornflowerblue;
    transform: rotateX(-90deg) translateZ(150px);
  }
  li:nth-child(5){
    background-color:rgb(85.0.255);
    transform: rotateY(-90deg) translateZ(150px);  
  }
  li:nth-child(6){
    background-color:purple;
    transform: rotateX(180deg) translateZ(150px);
  }
 
  @keyframes yao{
    
    100% {transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg) ;
      / * the transform: the rotate3d (1,1,1,360 deg) * /}}Copy the code
<ul>
  <li>yao</li>
  <li>Y</li>
  <li>A</li>
  <li>O</li>
  <li>hey</li>
  <li>hippies</li>
</ul>
Copy the code