An article to quickly learn css through animation!

This article will give you an in-depth analysis of how to achieve animation effects and quickly learn css through animation. I hope it will be helpful to everyone!

As business demands more and more for the front-end, CSS, one of the three magic weapons of the front-end, is becoming more and more complex. It brings a certain amount of pressure to the beginner students. CSS is not very complicated down to the specific attributes. The main problem is that there are many knowledge points. After finally learning the main knowledge points, I looked at the questions on the Internet or read the CSS books written by the masters, and I was drowned in a new ocean.

In fact, the human brain is not good at memorizing scattered knowledge points, but if there is a logical line that can connect these knowledge points, it can greatly facilitate the brain's memory and search. The clue should be logical and preferably interesting.

It just so happens that CSS animation is such an interesting clue. You can understand CSS properties in the changes of animation.

For example, we know that CSS adds the border-radius attribute of the rounded rectangle, so what is the effect of setting rounded corners of different sizes? Instead of changing the size again and again to experiment, we can make an animation to make it clear at a glance:

We can also make it move and deform:

We can even make it rotate:

CSS Animation Quick Literacy

Before stringing together other attributes, we First understand animation.

The core keyword of animation is "movement". We have to answer a few questions:

• What: What is moving?
• Where: Where to move?
• When: When to move? How long does it take to move?
• How: How to move?
• How much: How many times?

The results of these questions constitute the elements of an animation.

First of all, what is the moving subject? It's our HTML tags, or complex components composed of tags. For us, it’s mainly

and. Second, where to move? This is the css property that will be changed. This is also the knowledge point of the css we want to use to string together. Third, when to move? We need to specify the duration of the animation, the starting time, etc. This is a purely technical property of animation. Fourth, how to move? Whether to move at a constant speed, to accelerate, to accelerate first and then decelerate, or to create a Bezier curve or something like that, these are also the technical attributes of animation. Fifth, how many times do you move? Is it once, multiple times, or keeps moving? This is also a technical attribute of pure animation.

Transition animation

We first learn a simple CSS property animation called transition. It is composed of the above 4 properties:

• transition-property: Specify the css property value to be changed
• transition-duration: animation duration
• transition -timing-function: The speed change of the animation
• transition-delay: The delay time of the animation start

Let’s take a look at an example:

        #hellocss {
            transition-property: width;
            transition-duration: 5s;
            transition-timing-function: linear;
            transition-delay: 1s;
        }

This animation specifies It means that if the width changes, delay one second to run the animation of the width change for 5 seconds. The rate of change is uniform.

In order to see clearly, we set an initial width, plus a background color and foreground color:

    <style>
        #hellocss {
            background-color: blue;
            color: yellow;
            width: 20px;
            transition-property: width;
            transition-duration: 5s;
            transition-timing-function: linear;
            transition-delay: 1s;
        }
    </style>

Since it is animation, there must be changes. So we write two sentences of javascript:

    <script>
        function trans1(){
            let hcss1 = document.getElementById("hellocss");
            hcss1.style.width = "100px"; 
        }
    </script>

and then find an event to trigger this change. For example, we do it when the page is loaded:

  
    
Hello,HTML
    
Hello,CSS
    <script>
        function trans1(){
            let hcss1 = document.getElementById("hellocss");
            hcss1.style.width = "100px"; 
        }
    </script>
  

##Complete The code is as follows:

  
    
    <style>
        #hellocss {
            background-color: blue;
            color: yellow;
            width: 20px;
            transition-property: width;
            transition-duration: 5s;
            transition-timing-function: linear;
            transition-delay: 1s;
        }
    </style>
  
  
    
Hello,HTML
    
Hello,CSS
    <script>
        function trans1(){
            let hcss1 = document.getElementById("hellocss");
            hcss1.style.width = "100px"; 
        }
    </script>
  

After we become proficient, we can also abbreviate the four attributes into one:

transition: width 5s linear 1s;

If there is no delay, the fourth item does not need to be written. If the ease method of slow first and then fast is adopted, item 3 can also be omitted. If the first item is subject to any change, it can be written as all. But the second animation duration must be written. If not written, the default is 0 seconds, and there will be nothing.

All properties that can be calculated linearly can be used for animation. In addition to easy-to-understand coordinate attributes such as width, height, and position, color attributes are also often used in good scenes for animation. Let’s take a look at an animation process from yellow text on a blue background to black text on a white background:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
        #hellocss {
            background-color: blue;
            color: yellow;
            transition: all 10s linear 1s;
        }
    </style>
  </head>
  <body onload="trans1()">
    <div>Hello,HTML</div>
    <div id="hellocss">Hello,CSS</div>
    <script>
        function trans1(){
            let hcss1 = document.getElementById("hellocss");
            hcss1.style.backgroundColor = "white";
            hcss1.style.color="red"; 
        }
    </script>
  </body>
</html>

keyframes animation

The above transition is relatively simple. For example, how many times it needs to be looped, or how many times it needs to be changed back, or how many times it needs to be changed in the middle, etc., we need to specify more attributes. These needs are met by keyframes animation.

The advantage of keyframes animation is that the starting point and end point are specified in keyframes. There is no need to write events to change it. It is all done in css:

        @keyframes color_change{
            from {
                background-color: blue;
                color: yellow;
            }
            to {
                background-color: white;
                color: black;
            }
        }

然后我们在一个css选择器里面去引用定义好的keyframes动画，同时指定动画时长、变化曲线和延时：

        #hellocss {
            animation-name: color_change;
            animation-duration: 10s;
            animation-timing-function: linear;
            animation-delay: 1s;
        }

到了keyframes动画，我们终于可以指定播放多少次了，比如连播三次：

        #hellocss {
            animation-name: color_change;
            animation-duration: 10s;
            animation-timing-function: linear;
            animation-delay: 1s;
            animation-iteration-count: 3;
        }

甚至可以无限性地播放下去:

animation-iteration-count: infinite;

光循环播还不过瘾，我们还想先正着变，然后再变回来，我们可以将方向设为交替播放：

animation-direction: alternate;

把上面的综合在一起，大家跑起来看看：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      @keyframes color_change {
        from {
          background-color: blue;
          color: yellow;
        }
        to {
          background-color: white;
          color: black;
        }
      }
      #hellocss {
        animation-name: color_change;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
    </style>
  </head>
  <body>
    <div>Hello,HTML</div>
    <div id="hellocss">Hello,CSS</div>
  </body>
</html>

而其实呢，from和to，分别是0%和100%的别名，也可以这么写：

      @keyframes color_change {
        0% {
          background-color: blue;
          color: yellow;
        }
        100% {
          background-color: white;
          color: black;
        }
      }

这样我们可以增加百分比，让变化变得更有趣一些:

      @keyframes color_change {
        0% {
          background-color: blue;
          color: yellow;
        }
        50% {
          background-color: yellowgreen;
          color: red;
        }
        100% {
          background-color: white;
          color: black;
        }
      }

最后，如果想让动画播放暂停怎么办? 我们可以通过修改animationPlayState属性为paused来实现，比如我们让点击第一个div来实现暂停功能：

  <body>
    <div onclick="trans1()">Hello,HTML</div>
    <div id="hellocss">Hello,CSS</div>
    <script>
      function trans1() {
        let hcss1 = document.getElementById("hellocss");
        hcss1.style.animationPlayState = "paused";
      }
    </script>
  </body>

通过动画形象理解css属性

变形 - 圆角矩形

我们现在终于可以看看开篇时的第一个动画是如何写成的了：

      @keyframes color_change {
        0% {
          background-color: blue;
          color: yellow;
          border-radius: 0px;
        }
        50% {
          background-color: yellowgreen;
          color: red;
        }
        100% {
          background-color: palegoldenrod;
          color: black;
          border-radius: 100px;
        }
      }

平面移动：transform:translate属性

最简单的平移方式就是使用transform:translate属性。比如我们开篇的第二个动画：

我们先让变色的圆角矩形向下移100px，然后再右移100px:

            0% {
                background-color: blue;
                color: yellow;
                border-radius: 0px;
                transform:translate(0px,0px)
            }
            50% {
                background-color: yellowgreen;
                color: red;
                transform:translate(0px,100px)
            }
            100% {
                background-color: palegoldenrod;
                color: black;
                border-radius: 100px;
                transform:translate(100px,100px)
            }
        }

旋转：transform:rotate属性

最后我们看旋转属性。

        @keyframes color_change{
            0% {
                background-color: blue;
                color: yellow;
                border-radius: 0px;
                transform:translate(0px,0px);
                transform:rotate(0deg);
            }
            50% {
                background-color: yellowgreen;
                color: red;
                transform:translate(0px,100px);
                transform:rotate(90deg);
            }
            100% {
                background-color: palegoldenrod;
                color: black;
                border-radius: 100px;
                transform:translate(100px,100px);
                transform:rotate(180deg);
            }
        }

通过动画学习盒子模型

让我们回归基础，通过动画来了解盒子模型。

所谓盒子，最基础的就是宽和高。 这没啥可说的，来个宽高动画先体验一下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
        @keyframes box_change {
            0% {
                height: 50px;
                width: 50px;
            }
            50% {
                height: 200px;
                width: 50px;
            }
            100% {
                height: 200px;
                width: 200px;
            }
        }
        .box1 {
            background-color: blue;
            color: yellow;
            opacity: 0.65;
            animation-name: box_change;
            animation-duration: 10s;
            animation-delay: 1s;
            animation-timing-function: ease;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
    </style>
  </head>
  <body>
      <div class="box1">Hello Box</div>
  </body>
</html>

除了宽高之外，盒子有边框，边框内部有padding，边框外面还有margin。

包括边框在内，都分为top, bottom, left, right四个方向：

        border-width: 5px;
        border-top-color: #f5222d;
        border-bottom-color: #cf1322;
        border-left-color: #a8071a;
        border-right-color: #820014;
        padding: 10px;
        margin: 15px;

我们现在给边框加上颜色和形状，带着margin和padding动起来看看效果：

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      @keyframes box_change {
        0% {
          height: 50px;
          width: 50px;
          border-style: solid;
        }
        50% {
          height: 200px;
          width: 50px;
          border-style: dotted;
        }
        100% {
          height: 200px;
          width: 200px;
          border-style: dashed;
        }
      }
      .box1 {
        background-color: blue;
        color: yellow;
        border-width: 5px;
        border-top-color: #f5222d;
        border-bottom-color: #cf1322;
        border-left-color: #a8071a;
        border-right-color: #820014;
        padding: 10px;
        margin: 15px;
        animation-name: box_change;
        animation-duration: 10s;
        animation-delay: 1s;
        animation-timing-function: ease;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
    </style>
  </head>
  <body>
    <div class="box1">Hello Box</div>
  </body>
</html>

打开chrome的开发者工具，我们可以更清楚地看清content, padding, border, margin, 之间的关系：

Border取5px只是为了让其更容易被识别，但是太丑了，我们将其改为2px。效果就好得多了：

（学习视频分享：css视频教程）

The above is the detailed content of An article to quickly learn css through animation!. For more information, please follow other related articles on the PHP Chinese website!