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.

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.

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:

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.

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