Detailed description of twitter likes and twitter likes

Detailed description of twitter likes and twitter likes

Today on the micro blog saw @ via the gas network red trace of a micro blog, codepen posted on twitter like that animation effect source code, address http://codepen.io/yisi/pen/LpXVJb. After reading the results, the source code is also very simple and involves some simple animations of css3. Now I will introduce some techniques used in this animation.

First, in order to see clearly, I set the animation interval a little higher.

Paste the source code: js is useless, html and css are used only.

The html code is as follows:

 
The css code is as follows:
 1     body { 2           text-align: center; 3     } 4  5     h1 { 6       text-align: center; 7       color: #555; 8       font-weight: normal; 9     }10 11     #btn {12       position: absolute;13       left: -100%;14       top: -100%;15       opacity: 0;16       z-index: -1;17     }18 19     .btn-love {20       position: absolute;21       z-index: -1;22       left: 0;23       right: 0;24       top: 0;25       bottom: 0;26       margin: auto;27       height: 100%;28       width: 100%;29       cursor: pointer;30     }31     .btn-love:after {32       content: "";33       position: absolute;34       left: 0;35       right: 0;36       top: 100px;37       margin: 0 auto;38       background: url(https://abs.twimg.com/a/1446862637/img/t1/web_heart_animation.png) 0 0 no-repeat;39       background-size: 2900%;40       height: 100px;41       width: 100px;42     }43 44     #btn:checked + .btn-love:after {45       -webkit-animation: heart-burst steps(28) .8s 1 both;46               animation: heart-burst steps(28) .8s 1 both;47     }48 49     @-webkit-keyframes heart-burst {50       0% {51         background-position: left;52       }53       100% {54         background-position: right;55       }56     }57 58     @keyframes heart-burst {59       0% {60         background-position: left;61       }62       100% {63         background-position: right;64       }65     }
 
 
The code in front of css is also very understandable. Let me start with line 31. This is to set the background image for the label of the class "btn-love. You can see that the background image is added with a link. The background image after the link is the long image below.

As you can guess, you can set the start position and end position of a long graph, and set the change time to play a frame at a time, to simulate an animation.
 
#btn:checked + .btn-love:after {      -webkit-animation: heart-burst steps(28) .8s 1 both;              animation: heart-burst steps(28) .8s 1 both;    }
 
: Checked is used in css3 to match all selected input elements. There is no doubt about this.
 
Look at the animation effect in braces and use the animation attribute in css3. This attribute is short for setting the following animation attributes.
Animation-name: Specifies the keyframe name to be bound to the selector.
Animation-duration: specifies the time taken to complete the animation, in seconds or milliseconds.
Animation-timing-function: Specifies the animation speed curve. The value is optional.ease|linear|ease-in|ease-out|ease-in-out|step-start|step-end|steps([,[start|end]?) |cubic-bezier(x1, y1, x2, y2)
Animation-delay: Specifies the delay before the animation starts.
Animation-iteration-count: specifies the number of times the animation should be played.
Animation-direction: Specifies whether the animation should be played in turn.
Animation-play-state: Specifies whether the animation is running or paused.
Animation-fill-mode: Specifies whether the animation effect is visible before and after playback.
 
Five values are set in brackets.
The first value is set to animation-name. Heart-burst is the animation name set for this animation.
The second value is set to animation-timing-function. What does steps (28) mean? Because the above animation is not linear, it is similar to playing an image frame by frame, so we need to introduce the step () function. The following describes the function and its usage in detail.
This attribute can take the following values.
ease: The animation starts slowly, then accelerates, and finally slows down. Default Value;
linear: The animation speed is the same from start to end;
ease-in: Starts at low speed;
ease-out: End at low speed;
ease-in-out: The animation starts and ends at low speed;
The step function specifies a step function.
The first parameter specifies the number of intervals in the time function (must be greater than zero positive integer ). Divide the animation into different steps.
The second parameter is optional. It accepts the start and end values and specifies that a step change occurs at the start or end of each interval. The default value is end.
Step-start is equivalent to steps (1, start). An animation is divided into one step, and the left-side endpoint starts when the animation is executed;
Step-end is equivalent to steps (1, end): an animation is divided into one step. When an animation is executed, the animation starts with the ending endpoint. The default value is end.
In addition, the animation-timing-function attribute is set between each frame and each frame of animation, not the whole @ keyframes, it is not equivalent to the key frame set in @ keyframes.
This example is also used. The following code is directly changed from 0% to 100%,
@keyframes heart-burst {      0% {        background-position: left;      }      100% {        background-position: right;      }    }
If you add any State to 0% and 100%, we can see that the effect is changed to the following animation (to observe the animation obviously, the animation time is extended)

 
You will find that there is a problem with the animation.
 
The third value should be animation-delay in the abbreviated order? Actually not. It should be animation-duration. When only one value in seconds or milliseconds is set in animation, the default value is the value of animation-duration. If two values are set, the corresponding values are assigned in the order of animation-delay after animation-duration. So 0.8s is the total time to complete the animation. We can try to set the 0.8s value to a greater value. What we see is that the animation slows down, rather than the animation settings increase in latency, which proves my argument.
The fourth value is to set the value for animation-iteration-count. Therefore, set 1 to set the number of animation cycles. If changed to 2, the animation will be played again after the playback ends.
The fifth value is to set the value for animation-fill-mode. The animation-fill-mode attribute has four values.
None: do not change the default behavior.
Forwards: When the animation is complete, keep the last attribute value (defined in the last key frame ).
Backwards: Apply the start attribute value (defined in the first key frame) before the animation is displayed within the period specified by animation-delay ).
Both: both the forward and backward fill modes are applied.
We can see that both is set above. If we cancel the both, we can see the following animation. (!!! The font size is changed many times, but I still don't know why it can't be changed. So let's take a look ..!!!)
 

 
We can see that it does not maintain the "red-hearted" status after the thumbs up, and immediately restores the animation to the initial frame after the animation is completed. So we can see that the both setting aims to maintain the frame where the animation is located at the beginning and end of the animation.
 
This animation does not involve animation-delay, animation-direction, and animation-play-state. Animation-delay is used to set the animation delay Time, as mentioned above. The animation-direction attribute defines whether an animation should be played in turn in reverse order. Two values can be normal and alternate, respectively. Normal is the default value, that is, no carousel. alternate sets the animation to play back in turn. Animation-play-state sets whether the animation is paused or played. This should be used in combination with js. Click to change the value corresponding to this attribute to pause and play the animation. For example, click it to pause playback, and then click it to continue playing the animation. The paused and running values are easy to understand.
The above is a brief introduction to common methods of css animation Attributes Based on the twitter likes animation.