CSS transformation, transition, animation cases

Requirements: 5s clock cycle five times; Each execution time is 2s; Each execution is executed in the opposite direction after the bottom; And then it stays in the last frame

Inspection: Basic property value of animation

Click to see the effect

Key code description:

  animation: move 2s linear 0s 5 alternate forwards;
Copy the code

Detailed code examples:

<div class="square"></div> </div> width: 200px; height: 200px; background-color: #fb3; } .box .square{ position: absolute; width: 30px; height: 30px; background-color: #58a; animation: move 2s linear 0s 5 alternate forwards; } move @keyframes move {0% {transform: translateX(0); } 33% { transform: translateX(170px); } 66% { transform: translate(0, 170px); } 100% { transform: translate(170px, 170px); }}Copy the code

Code examples:

<div class="line-box"></div> </div> width: 200px; height: 200px; background-color: #fb3; } .box .line-box{ position: absolute; width: 220px; // The extra 20 pixels is the line segment to the box height: 220px; left: 0; top: 0; margin-left: -10px; margin-top: -10px; border: 2px solid #58a; box-sizing: border-box; animation: move 5s linear infinite; } move @keyframes move {0% {clip: rect(0 220px 2px 0); // Clip 25% {clip: rect(0, 220px 2px); } 50% { clip: rect(2px 220px 0 0); } 75% { clip: rect(0 2px 220px 0); }}Copy the code

Implementation method:

• First draw the basic shape of the pie chart and use gradient to generate background code:

.box {
      border-radius: 50%;
      background: linear-gradient(to right, #58a 50%, #fb3 0);
    }
Copy the code

Effect:

• Cover the background on the right with a fake element and set a rounded Border.
• Change center of rotation
• Set the animation. When the animation is rotated to 50%, it needs to change the background of the pseudo-element from blue to yellow.

Code examples:

.box:before { content: ''; position: absolute; width: 50%; height: 100%; background-color: #58a; right: 0; border-radius: 0 100% 100% 0 / 50%; transform-origin: left center; animation: rotate 6s linear infinite, changeColor 12s step-end infinite; } @keyframes rotate{ to{ transform: rotate(180deg); } } @keyframes changeColor{ 50%{ background-color: #fb3; }}Copy the code

Pie chart of any size

preview

If you know the magic use of animation-delay, this effect is easy to implement.

Note: A negative delay value is legal, similar to the delay of 0s, which means that the animation will start playing immediately, but will automatically advance to the absolute value of the delay value, as if the animation had played for the specified time in the past. So the effect is that the animation skips the specified time and starts in the middle.

So we just need to add the pseudo-element code:

    .box:before {
      ...

      animation-delay: -3s;
      animation-play-state: paused;
    }
Copy the code

The final code is as follows:

.box { position: relative; width: 200px; height: 200px; margin: 0 auto; margin-top: 50px; border-radius: 50%; background: linear-gradient(to right, #58a 50%, #fb3 0); Animation - delay: 7.5 s; } .box:before { content: ''; position: absolute; width: 50%; height: 100%; background-color: #58a; right: 0; border-radius: 0 100% 100% 0 / 50%; transform-origin: left center; animation: rotate 6s linear infinite, change 12s step-end infinite; animation-delay: inherit; animation-play-state: paused; } @keyframes rotate{ to{ transform: rotate(180deg); } } @keyframes change{ 50%{ background-color: #fb3; }}Copy the code

Implementation method [personal opinion] : control the left and right side respectively and rotate separately.

The dom structure:

<div class="box">
  <div class="item-left"></div>
  <div class="item-right"></div>
  <div class="item-center">60s</div> 
</div>
Copy the code

• Item-right, the gradient background and semicircle should be set on the right side, and a gray should be selected as the middle point of the gradient. Here, #666 is selected, and the effect picture is as follows:

Code:

.box .item-right { position: absolute; width: 50%; height: 100%; top: 0; right: 0; border-radius: 0 100% 100% 0/50%; /* Set the rounded corner to achieve the semicird effect */ BACKGROUND: Linear-gradient (# FFF, #666); /* Gradient background */}Copy the code

• Item-right, the pseudo-element is used to cover the original color. It should be noted that, in order to make the pseudo-element cover the color of item-Right better, methods such as proportional magnification or shading can be used. Shadow is selected here.

    .box .item-right:before{
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: inherit;
      background-color: #fff;
      box-shadow: 3px 0 2px 2px #fff;
    }
Copy the code

• Do the same for the left side, but note that the rounded corners and colors need to be changed:

      border-radius: 100% 0 0 100%/50%;
      background: linear-gradient(#000, #666);
Copy the code

• Item-center implements a small circle in the middle, on which you can perform a variety of operations:

    .box .item-center{
      position: absolute;
      width: 190px;
      height: 190px;
      border-radius: 50%;
      background-color: #fff;
      top: 5px;
      left: 5px;
      line-height: 190px;
    }
Copy the code

• So let’s do the rotation.
• The center of the right selection is in the middle of the left, and the rotation center of the left is in the middle of the right, so it needs to be set separatelytransform-originProperties.
• The first animation sets the rotation animation, and the second animation sets the color of the pseudo-element on the right to transparent when the rotation ends, so that the left side can be rotated.

animation: rotate 30s linear infinite, changeColor 60s step-end infinite;
Copy the code

• The delay time for left rotation should be set until right rotation ends.

animation: rotate 30s 30s linear infinite;
Copy the code

Code for two animations:

@keyframes rotate { to { transform: rotate(180deg); } } @keyframes changeColor{ 50%{ background-color: transparent; }}Copy the code