Detailed explanation of the use of animation attribute in CSS3

Before we start introducing Animation, we need to first understand a special thing, that is "Keyframes". We call it "Keyframes". Friends who have played Flash may be familiar with this thing. Let's take a look at what this "Keyframes" is. When we used transition to create a simple transition effect earlier, we included initial attributes and final attributes, a start action time and a continuation action time as well as the transformation rate of the action. In fact, these values ​​​​are all intermediate values. If we want The control is more detailed, for example, what actions do I want to perform in the first time period, and what actions do I want to perform in the second time period (switching to flash, it means what actions I want to perform in the first frame, and what actions I want to perform in the second frame What action), it is difficult for us to use Transition to achieve this. At this time, we also need such a "key frame" to control. Then CSS3 Animation uses the "keyframes" attribute to achieve this effect. Let's take a look at Keyframes first:

Keyframes have their own grammar rules. Their naming starts with "@key

<br/>

frames", followed by the "name of the animation" plus a For the curly brackets "{}", there are some style rules for different time periods in the brackets, which is a bit like the way we write CSS styles. For a style rule in "@keyframes" that is composed of multiple percentages, such as between "0%" and "100%", we can create multiple percentages in this rule, and we give each percentage a Elements with animation effects need to be added with different attributes, so that the elements can achieve a constantly changing effect, such as moving, changing element color, position, size, shape, etc. However, one thing to note is that we can use "fromt" and "to" represent where an animation starts and ends. In other words, "from" is equivalent to "0%" and "to" is equivalent to "100%". It is worth mentioning that, Among them, "0%" cannot omit the percent sign like other attribute values. We must add the percent sign ("%") here. If not, our keyframes will be invalid and will have no effect. Because the unit of keyframes only accepts percentage values. <br/>

<br/>

Keyframes can be specified in any order to determine the key positions of Animation animation changes. The specific grammar rules are as follows:

keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';   
 keyframes-blocks: [ keyframe-selectors block ]* ;   
 keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*

Put the above grammar together

@keyframes IDENT {   
     from {   
       Properties:Properties value;   
     }   
     Percentage {   
       Properties:Properties value;   
     }   
     to {   
       Properties:Properties value;   
     }   
   }  
   或者全部写成百分比的形式：

@keyframes IDENT {   
   0% {   
      Properties:Properties value;   
   }   
   Percentage {   
      Properties:Properties value;   
   }   
   100% {   
      Properties:Properties value;   
   }   
 }

Among them, IDENT is an animation name. You can choose it casually. Of course, it is better to be more semantic. Percentage is a percentage value. We can add many such percentages. , Properties is the attribute name of css, such as left, background, etc., and value is the attribute value of the corresponding attribute. It is worth mentioning that our from and to correspond to 0% and 100% respectively. We have mentioned this before. So far, only browsers with webkit core support animation animation, so I need to add the -webkit prefix to the above. It is said that Firefox5 can support the animation animation property of CSS3.

Let’s take a look at an example:

@-webkit-keyframes 'test' {   
     0% {   
        margin-left: 100px;   
        background: green;   
     }   
     40% {   
        margin-left: 150px;   
        background: orange;   
     }   
     60% {   
        margin-left: 75px;   
        background: blue;   
     }   
     100% {   
        margin-left: 100px;   
        background: red;   
     }   
  }

Here we define an animation called “test”. Its animation starts from 0% and ends at 100%, and it also goes through two processes of 40% and 60%. , the specific meaning of the above code is: when the test animation is at 0%, the element is positioned at the left position of 100px, the background color is green, then at 40%, the element transitions to the left position of 150px and the background color is orange, and at 60%, the element transitions to The left position is 75px, the background color is blue, and the final position element that ends the animation 100% returns to the starting point where the left position is 100px, and the background color becomes red. Assume that we only give this animation 10s of execution time, then the execution status of each segment is as shown below:

201586182405067.png (499×536)

<br/>

After Keyframes are defined, how do we need to go Call the animation "test" just defined

<br/>

CSS3 animation is similar to the transition attribute. They all change the attribute value of the element over time. The main difference between them is that transition needs to trigger an event (hover event or click event, etc.) to change its css properties over time; animation can also explicitly change the element css over time without triggering any events. attribute value to achieve an animation effect. In this way, we can directly call the animation attribute of animation in an element. Based on this, CSS3 animation requires clear animation attribute values. This is back to what we said above, we need keyframes to define CSS at different times. Attribute values ​​achieve the effect of elements changing in different time periods.

<br/>

Let’s take a look at how to call the animation attribute on an element

.demo1 {   
     width: 50px;   
     height: 50px;   
     margin-left: 100px;   
     background: blue;   
     -webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/  
     -webkit-animation-duration: 10s;/*动画持续时间*/  
     -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/  
     -webkit-animation-delay: 2s;/*动画延迟时间*/  
     -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/  
     -webkit-animation-direction: alternate;/*定义动画方式*/  
  }

CSS Animation动画效果将会影响元素相对应的css值，在整个动画过程中，元素的变化属性值完全是由animation来控制，动画后面的会覆盖前面的属性值。如上面例子：因为我们这个demo只是在不同的时间段改变了demo1的背景色和左边距，其默认值是：margin-left:100px;background: blue；但当我们在执行动画0%时，margin-left:100px,background:green；当执行到40%时，属性变成了：margin-left:150px;background:orange;当执行到60%时margin-left:75px;background:blue;当动画 执行到100%时：margin-left:100px;background: red;此时动画将完成，那么margin-left和background两个属性值将是以100%时的为主,他不会产生叠加效果，只是一次一次覆盖前一次出将的css属性。就如我们平时的css一样，最后出现的权根是最大的。当动画结束后，样式回到默认效果。

 以上就是CSS3中animation属性的使用详解的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！