An article to quickly learn css through animation!

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:

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

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

        

         Hello,HTML
        
        

         Hello,CSS
        

##Complete The code is as follows:

        
        

         

          
         
        
        

         

          
         
        
        

         Hello,HTML
        
        

         Hello,CSS
        

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:

     
  
Hello,HTML
 
Hello,CSS
   

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;

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

     
  
Hello,HTML
 
Hello,CSS
  

而其实呢，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来实现暂停功能：

 
Hello,HTML
 
Hello,CSS
  

通过动画形象理解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); } }

通过动画学习盒子模型

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

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

     
  
Hello Box
  

除了宽高之外，盒子有边框，边框内部有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动起来看看效果：

代码如下：

     
  
Hello Box
  

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

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

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