CSS3 Animate properties: Introduction to Animation properties

This article brings you the content is about how to use CSS3 Animation properties: Animation properties of the introduction, there is a certain reference value, there is a need for friends to refer to, I hope you have some help.

There are three properties in the CSS3 attribute for animating:Transform,Transition,Animation; we've learned about Transform and Transition together, Let's have some basic animation of the elements, which I think is enough to make everyone excited for a while, today we take advantage of this honeymoon to continue the third animated property animation learning, from the animation literal meaning, we know is "animation" meaning. But the animation in CSS3 is different from the canvas drawing animation in HTML5, and animation only applies to DOM elements that already exist on the page, and he does not have the same animated effect as Flash and JavaScript and jquery. Because we use CSS3 's animation to make the animation we can save the complex js,jquery code (like I do not understand JS is a very happy thing), just a little bit of a disadvantage, we use animation can create some of the animation we want to effect, But a bit rough, if you want to make a better animation, I see you still use Flash or JS and so on. Although the animation made by animation is simple and rough, I think we can not reduce the enthusiasm of all of us for their study.

Before we begin to introduce animation, we need to understand a special thing, that is, "Keyframes", we call him "key frame", played flash friends may not be unfamiliar with this thing. Let's take a look at what this "Keyframes" is. Before we used transition to make a simple transition effect, we included the initial and final attributes, a starting action time and a continuation action time, and the change rate of the action, in fact these values are an intermediate value, if we want to control the finer, For example, I want to take the first time to perform what action, the second time period to perform what action (in Flash said, is the first frame I want to perform what action, the second frame I want to perform what action), so we use transition is difficult to achieve, at this time we also need such a "keyframe" to control. Then the CSS3 animation is the "keyframes" this property to achieve this effect. Let's take a look at KeyFrames first:

KeyFrames has its own grammar rules, his name is "@keyframes" beginning, followed by the "name of the animation" plus a pair of curly braces "{}", the parentheses are some of the different time-period style rules, a bit like our CSS style. For a style rule in a "@keyframes" is made up of a number of percentages, such as "0%" to "100%", we can create multiple percentages in this rule, we give each of the percentages to animate elements with different attributes, This allows elements to reach a changing effect, such as moving, changing element color, position, size, shape, and so on, but one thing to note is that we can use "fromt" "to" to represent where an animation starts and ends, meaning that the "from" is equivalent to "0%" and " To "equivalent to" 100% ", it is worth saying that" 0% "can not be the same as other attributes to the value of the percentage symbol omitted, we must add a percent sign here ("% ") if not added, we this keyframes is invalid, does not play any role. Because keyframes units accept only percent values.

KeyFrames can specify any order in which to determine the key position of animation animation changes. Its specific syntax rules are as follows:

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

I'm combining the grammar above.

@keyframes IDENT {
      from {
        Properties: Properties value;
      }
      Percentage {
        Properties: Properties value;
      }
      to {
        Properties: Properties value;
      }
    }
    Or write it all as a percentage:
    @keyframes IDENT {
       0% {
          Properties: Properties value;
       }
       Percentage {
          Properties: Properties value;
       }
       100% {
          Properties: Properties value;
       }
     }

Where ident is an animated name, you can take it, of course, semantically a little better, percentage is a percentage value, we can add a number of such percentages, properties for CSS property names, such as Left,background, etc., Value is the property value of the corresponding property. It is worth mentioning that our from and to respectively corresponds to 0% and 100%. We mentioned this earlier, too. So far the animation animation of only the WebKit kernel browser, so I need to add-webkit prefix above, it is said that FIREFOX5 can support CSS3 animation properties.

Let's take a look at an example of the website

  @-webkit-keyframes 'wobble' {
     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 a "wobble" animation, his animation is from 0% to 100% end, also experienced a 40% and 60% two process, the above code specifically means: Wobble animation at 0% when the element is positioned to the left 100px position background color green , and then 40% when the element transitions to the left 150px position and the background color is orange,60% when the element transitions to the left 75px position, the background color is blue, the last 100% end animation position element back to the starting point left 100px, the background color into red. False setting we only give this animation a 10s execution time, then the status of each of his executions is as follows:

After the keyframes is defined, how do we need to invoke the animated "wobble" that we have just defined?

CSS3 animation are similar to transition properties, and they all change the attribute value of an element over time. Their main difference is that transition needs to trigger an event (hover event or click event) to change its CSS properties over time, and animation can change the property value of the element CSS explicitly over time without triggering any events. So as to achieve an animation effect. So that we can call animation's animated property directly in an element, and based on this, CSS3 's animation needs to have a definite animated property value, which is what we call a keyframes to define CSS property values at different times. Achieve the effect of the element at different time periods.

Let's take a look at how to call an element animation property

.demo1 {
      width: 50px;
      height: 50px;
      margin-left: 100px;
      background: blue;
      -webkit-animation-name: 'wobble'; / * animation property name, which is the animation name defined by our keyframes * /
      -webkit-animation-duration: 10s; / * animation duration * /
      -webkit-animation-timing-function: ease-in-out; / * Animation frequency, which is the same as transition-timing-function * /
      -webkit-animation-delay: 2s; / * animation delay time * /
      -webkit-animation-iteration-count: 10; / * Define cycle data, infinite is unlimited times * /
      -webkit-animation-direction: alternate; / * define animation method * /
   }

CSS animation animation effect will affect the element corresponding to the CSS value, throughout the animation process, the element changes the value of the property is completely controlled by the animation, after the animation will overwrite the previous property values. As the above example: because our demo just changed the background color and the left margin of the demo1 in different time periods, the default value is: Margin-left:100px;background:blue; But when we're doing animation 0%, Margin-left : 100px,background:green; When executed to 40%, the property becomes: margin-left:150px;background:orange; when executed to 60% Margin-left:75px;background : Blue; When the animation is executed to 100%: margin-left:100px;background:red, the animation will be completed, then margin-left and background two attribute values will be 100% when the main, he does not produce a superposition effect, It's just a one-time overwrite of the previous CSS property. Just like our usual CSS, the last occurrence of the right root is the largest. When the animation finishes, the style returns to the default effect.

We can see a picture from the website about the CSS3 of the animation on the property change process

From the above demo we can see that animation and transition have their own corresponding properties, then there are several main animation in the following: Animation-name;animation-duration; Animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state. Let's take a look at the use of these several attributes separately

First, Animation-name:

Grammar:

  Animation-name:none | Ident[,none | ident]*;

Value Description:

Animation-name: is used to define the name of an animation, which has two values: Ident is the name of the animation created by keyframes, in other words, the ident here is consistent with the keyframes in ident, and if not, no animated effect will be achieved ; none is the default value, and no animation effect occurs when the values are none. In addition, we have this property as in the previous transition, we can attach a few animation to an element at the same time, we just need to use a comma "," separated.

Second, Animation-duration:

Grammar:

  Animation-duration: <time>[,<time>]*

Value Description:

Animation-duration is used to specify the length of time that an element plays an animation, and the value:<time> is a number, in S (seconds). Its default value is "0". This property is the same as the transition-duration used in transition.

Third, Animation-timing-function:

Grammar:

 Animation-timing-function:ease | Linear | ease-in | Ease-out | Ease-in-out | Cubic-bezier (<NUMBER>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease- In-out | Cubic-bezier (<NUMBER>, <number>, <number>, <number>)]*

Value Description:

Animation-timing-function: Refers to the element according to the time of the advance to change the property value of the transformation rate, the simple point is the way the animation play. Like the transition-timing-function in transition, he has the following six ways of transformation: Ease;ease-in;ease-in-out;linear;cubic-bezier. The specific use of the method you can click here to see how the use of transition-timing-function.

Four, Animation-delay:

Grammar:

  Animation-delay: <time>[,<time>]*

Value Description:

Animation-delay: is used to specify the element animation start time. The value is <time> as the value, in s (seconds), and the default value is 0. This property is the same as the Transition-delayy use method.

Wu, Animation-iteration-count

Grammar:

  Animation-iteration-count:infinite | <number> [, Infinite | <number>]*

Value Description:

Animation-iteration-count is used to specify the number of cycles that an element plays an animation, which can take a value of <number> as a number, with a default value of "1" and a infinite loop for an infinite number of times.

Liu, Animation-direction

Grammar:

  Animation-direction:normal | alternate [, Normal | alternate]*

Value Description:

Animation-direction is used to specify the direction in which an element animates, with only two values, the default is normal, and if set to normal, each cycle of the animation is played forward, and the other value is alternate, and his role is, The animation plays forward in an even number of times, and the odd number of times plays in the opposite direction.

Seven, Animation-play-state

Grammar:

   animation-play-state:running | Paused [, running | paused]*

Value Description:

Animation-play-state is primarily used to control the playback state of element animations. There are mainly two values, running and paused where running is the default value. Their role is similar to our music player, you can stop the animation being played by paused, or you can replay the paused animation by running, our replay here is not necessarily from the beginning of the element animation play, but from the position you paused to start playing. In addition, if the animation is temporarily played, the style of the element will return to the most original setting state. This property is rarely supported by the kernel at this time, so just mention it slightly.

We introduce the syntax and values of each property in animation, so we can give the animation attribute a shorthand by combining the above contents:

  animation:[<animation-name> | | <animation-duration> | | <animation-timing-function> | | < animation-delay> | | <animation-iteration-count> | | <animation-direction>] [, [<animation-name> | | <animation-duration> | | < animation-timing-function> | | <animation-delay> | | <animation-iteration-count> | | <animation-direction>]]*

As shown

Compatible browsers

I also briefly mentioned earlier, CSS3 's animation so far only support WebKit Kernel browser, because the first to propose this property is the safari company, it is said that firefox5.0+ will support animation.

So far, we have studied the theoretical knowledge of animation together, let's take a look at two instance making process to strengthen the practical ability of animation

Demo One: The button that glows color

Our demo is mainly by changing the elements of the keyframes in the Background;color;box-shadow three properties, to achieve a glow-changing button effect, we look at its implementation code

HTML Code:

  <a href= "" class= "btn" > Glowing button</a>

CSS Code

/ * Create a dynamic name for this button: buttonLight, and then set a different background, color in each time period to achieve the color changing effect, and change the box-shadow to achieve the lighting effect * /
  @ -webkit-keyframes 'buttonLight' {
     from {
       background: rgba (96, 203, 27,0.5);
       -webkit-box-shadow: 0 0 5px rgba (255, 255, 255, 0.3) inset, 0 0 3px rgba (220, 120, 200, 0.5);
       color: red;
     }
     25% {
       background: rgba (196, 203, 27,0.8);
       -webkit-box-shadow: 0 0 10px rgba (255, 155, 255, 0.5) inset, 0 0 8px rgba (120, 120, 200, 0.8);
       color: blue;
    }
    50% {
      background: rgba (196, 203, 127,1);
      -webkit-box-shadow: 0 0 5px rgba (155, 255, 255, 0.3) inset, 0 0 3px rgba (220, 120, 100, 1);
      color: orange;
    }
    75% {
      background: rgba (196, 203, 27,0.8);
      -webkit-box-shadow: 0 0 10px rgba (255, 155, 255, 0.5) inset, 0 0 8px rgba (120, 120, 200, 0.8);
      color: black;
    }
   to {
     background: rgba (96, 203, 27,0.5);
     -webkit-box-shadow: 0 0 5px rgba (255, 255, 255, 0.3) inset, 0 0 3px rgba (220, 120, 200, 0.5);
     color: green;
    }
  }
  a.btn {
    / * Basic properties of the button * /
    background: # 60cb1b;
    font-size: 16px;
    padding: 10px 15px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 0 -1px 1px rgba (0,0,0,0.3);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 5px rgba (255, 255, 255, 0.6) inset, 0 0 3px rgba (220, 120, 200, 0.8);
    -webkit-box-shadow: 0 0 5px rgba (255, 255, 255, 0.6) inset, 0 0 3px rgba (220, 120, 200, 0.8);
    box-shadow: 0 0 5px rgba (255, 255, 255, 0.6) inset, 0 0 3px rgba (220, 120, 200, 0.8);
    / * Call the animation property, so that the button will be animated when the page is loaded * /
    -webkit-animation-name: "buttonLight"; / * Animation name, which must be consistent with the name defined by @ keyframes * /
    -webkit-animation-duration: 5s; / * Long duration of animation * /
    -webkit-animation-iteration-count: infinite; / * The number of times the animation is looped * /
  }

Effect:

Effect of a change in the effect of two

To better see the effect of this demo, you can copy the above code to your page, and use Safari and chrome, you will find it very interesting, the whole button seems to be constantly breathing.

Demo two: square rotation into round

We this demo is through the transform rotate and Border-radius different values, a square image with the passage of time, slowly converted into a circular effect, the following we look at its specific implementation of the effect

HTML Code:

   <a href= "#" class= "box" ></a>   <span class= "Click-btn" >Click</span>

CSS Code:

/ * Define animated square to round animation * /
  @ -webkit-keyframes 'round' {
     from {
       -webkit-transform: rotate (36deg);
       -webkit-border-radius: 2px;
     }
  10% {
      -webkit-transform: rotate (72deg);
      -webkit-border-radius: 4px;
     }
  20% {
      -webkit-transform: rotate (108deg);
      -webkit-border-radius: 6px;
    }
  30% {
      -webkit-transform: rotate (144deg);
      -webkit-border-radius: 9px;
    }
  40% {
     -webkit-transform: rotate (180deg);
     -webkit-border-radius: 12px;
  }
  50% {
     -webkit-transform: rotate (216deg);
     -webkit-border-radius: 14px;
  }
  60% {
     -webkit-transform: rotate (252deg);
     -webkit-border-radius: 16px;
  }
  70% {
     -webkit-transform: rotate (288deg);
     -webkit-border-radius: 19px;
  }
  80% {
     -webkit-transform: rotate (324deg);
     -webkit-border-radius: 22px;
  }
  to {
     -webkit-transform: rotate (360deg);
     -webkit-border-radius: 25px;
  }
}
   / * Give the box a preliminary style * /
   a.box {
      display: block;
      width: 50px;
      height: 50px;
      background: red;
      margin-bottom: 20px;
   }
   / * Circle box style and apply animation here * /
   a.round {
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 25px;
      background: green;
      -webkit-animation-name: 'round'; / * Animation name * /
      -webkit-animation-duration: 60s; / * Duration of playback once * /
      -webkit-animation-timing-function: ease; / * animation playback frequency * /
      -webkit-animation-iteration-count: infinite; / * The number of times the animation is played is infinite * /
    }
           
   / * click button effect * /
   .click-btn {
       background: rgba (125,220,80,0.8);
       -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
       border-radius: 5px;
       -webkit-box-shadow: inset 0 0 8px rgba (255,255,255,0.8), 0 0 10px rgba (10,255,120,0.3);
       -moz-box-shadow: inset 0 0 8px rgba (255,255,255,0.8), 0 0 10px rgba (10,255,120,0.3);
       box-shadow: inset 0 0 8px rgba (255,255,255,0.8), 0 0 10px rgba (10,255,120,0.3);
       padding: 5px 10px;
       color: # 369;
       font-size: 16px;
       font-weight: bold;
       text-align: center;
       text-shadow: 0 -1px 0 rgba (0,0,0,0.5);
       cursor: pointer;
   }

JQuery Code:

 <script type="text/javascript">
      $(document).ready(function(){
         $(".click-btn").click(function(){
             $(this).siblings().addClass("round");
          });
       });
  </script>

The box was not animated when we loaded it, and when we clicked the Click button We added a round class name to the original box, triggering a round action. Please see the effect:

Effect when no button is clicked (No animation effect) Click the button to start playing the animation

We here simply introduced the two demo application, in fact, we can play their own imagination to make better and more animation effect, if you are interested in animation animation, you can refer to these several sites: Webdesignersblog, Slope, Impressivewebs There are a number of particularly intentional animated demos.