Use keyframes to create a pure CSS breathing light button

Before starting today's content, let's take a brief look at keyframes, which is in the W3C draft.Animation Module. In keyframes, each set of animations can be assigned a name that allows you to flexibly define the animation to be executed by elements. Unfortunately, so far, onlyWebKit KernelThe browser of this article supports this feature, so the row of icons in the upper right corner of this article, only chrome and Safari are lit up. However, this does not affect our learning of this technology,Partial differentiated development has always been the first choice of css3 and HTML5.In addition, the domestic sogou browser is also using the WebKit kernel in high-speed mode. If you are reluctant to use IE, but have to use IE, you can try it.

Then we start to create a button with a breathing lamp effect step by step. First, place a label on the page and define the basic style for it:

        <a href="#" class="demo">Button</a>

a.demo {    display:block;    line-height: 30px;    width: 80px;    text-align: center;    margin: 100px auto;    background: #80CB1B;    font-size: 16px;    padding: 8px 19px 9px;    -moz-box-shadow: 0 0 5px #343434;    -webkit-box-shadow: 0 0 5px #fff;    box-shadow: 0 0 5px #343434;    color: #fff;    font-weight: bold;    padding: 5px 10px;    text-decoration: none;    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);}

To achieve the final effect smoothly, let's take a look at how to define an animation using keyframes. The definition of keyframes is actually very simple. below is the example code provided by W3C:

/** In practice, use the WebKit private attribute @-WebKit-keyframes as the property name **/@ keyframes 'wobble '{0% {left: 100px ;} 40% {left: 150px;} 60% {left: 75px;} 100% {left: 100px ;}}

The code above defines an animation named Wobble. It will position the element to 100px at the beginning of the animation (0%), and then transition to 150px, 75px, finally, at the end of the animation (100%), return to the starting position. This is actually an animation that allows elements to swing horizontally. It looks very simple. In the code, 0% and 100% can be replaced by from and to, respectively, indicating the starting and ending states of the animation. In other cases, the States are defined by percentages, if you have some knowledge about flash, you can understand itKey Frames in Flash. Next is the keyframes definition of our breathing light button. This set of animations is named breathinglight and "key frames" are inserted at the start, end, and center of the animation ", reset the background color and shadow of an element:

@-webkit-keyframes 'breathingLight' {        from {                background-color: #80CB1B;                -webkit-box-shadow:0 0 5px #ccc;        }50% {                background-color: #B7F20F;                -webkit-box-shadow: 0 0 10px #398B08;        }to {                background-color: #80CB1B;                -webkit-box-shadow:0 0 5px #ccc;        }}

After keyframes is defined, you need to tell the browser how to call the defined animation breathinglight. Obviously, we should set the element that was initially added to the page:

a.demo {-webkit-animation-name: breathingLight;-webkit-animation-duration: 3s;-webkit-animation-iteration-count: infinite;}

As a matter of fact, we should have been able to see the following results so far: one click, one click, one light, one dark, compared to the previous monotonous and rigid button, obviously more eye-catching:

Button

However, we still need to understand the above Code so that we can use it flexibly in the future. In this application, three attributes are added to the button for animation execution. The first attribute is-WebKit-animation-nameSpecifies the animation name to be executed for the element, that is, the keyframes we just defined. Second Property-WebKit-animation-DurationIt declares the animation execution time, which is set to 3 seconds. Third attribute-WebKit-animation-iteration-countDefines the number of times an element executes an animation. The default value is 1. You can specify the number of times. Here, infinite is called an infinite loop. In fact, defining animation attributes is not limited to these three attributes. The complete attributes and their usage are listed in the following table. during actual code writing, remember to add the private prefix of-WebKit to these attribute names.

Attribute	Available Value	Description
Animation-name	Name	Animation name
Animation-Duration	Time	Animation execution time
Animation-timing-Function	Linear, linear, etc.	Animation Functions
Animation-iteration-count	Infinite, number	Repeated times
Animation-direction	Normal | Alternate	Reverse the animation direction
Animation-Delay	Time	Latency

References:

• W3C --- animations
• Safari Reference Library --- animations