CSS3 animation comprehension and Application

CSS3 animation comprehension and Application
Transform: Deformation of elements; Transition: controls the changes (time, etc.) of a certain attribute or multiple attributes of an element, similar to the flash compensation animation. But there are only two key points. Start and end. Animation: controls the changes (such as time) of an element's attributes or multiple attributes, similar to flash's compensation Animation. You can set multiple key secrets. Transition and Animation: transition must trigger an event, while animation can explicitly change the attribute value of the element css over time without triggering any event, to achieve an animation effect. The last time I learned the deformation Transform, I will watch the animation below. 1. Transitioncss's transition allows the css attribute value to smoothly transition within a certain period of time. This effect can be triggered by mouse clicking, getting focus, being clicked, or changing any element, and the CSS attribute values can be smoothly changed with the animation effect. Syntax: transition: [<'transition-properties'> | <'transition-duration'> | <'transition-timing-function'> | <'transition-delay'> [, [<'transition-properties'> | <'transition-duration'> | <'transition-timing-function'> | <'transition-delay'>] * transition mainly includes four attribute values: the attributes of the transformation are transition-property, and the duration of the transformation is transition-duration. during the duration of the transformation, the rate change transition-timing-function and the transformation delay time is transition-delay. The following describes the four attribute values. transition-property Syntax: transition-property: none | all | [<IDENT>] [', '<IDENT>] * transition-property is used to specify the transition effect when one of the element's attributes changes. It has the following values: none (no attribute changes ); all (all attributes changed) is also its default value; indent (element attribute name ). When its value is none, the transition stops immediately. When it is set to all, the element will execute the transition effect when any attribute value changes. The ident is a property value that can be specified for an element. The corresponding types are as follows: 1. color: converted by the red, green, blue, and transparency components (each value is processed) such as background-color, border-color, color, css attributes such as outline-color; 2. length: real numbers such as word-spacing, width, vertical-align, top, right, bottom, left, padding, outline-width, attributes such as margin, min-width, min-height, max-width, max-height, line-height, height, border-width, border-spacing, and background-position; 3. percentage: real numbers such as word-spacing, width, vertical-align, top, right, bottom, left, min-wid Th, min-height, max-width, max-height, line-height, height, background-position, and other attributes; 4. integer discrete step (entire number ), when the real numeric space and floor () is used to convert to an integer, such as outline-offset and z-index are used. 5. The real number (floating point type) value, such: zoom, opacity, font-weight, and other attributes; 6. transform list: For details, see CSS3 Transform 7. rectangle: convert values to values through x, y, width, and height) transform, such as: crop 8, visibility: discrete step, within the range of 0 to 1, 0 indicates "hidden", 1 indicates full "display", such as: visibility 9, shadow: applies to color, x, y, and blur (Fuzzy) attributes, such as: te Xt-shadow 10, gradient: changes by position and color at each stop. They must have the same type (radial or linear) and the same stop value for animation, such as: background-image 11, paint server (SVG ): only the following conditions are supported: From gradient to gradient and color to color, and then work is similar to the above 12, space-separated list of above: if the list has the same project value, each item in the list changes according to the preceding rules. Otherwise, no changes are made. 13. a shorthand property: if all the parts of the abbreviation can be animated, the attributes will change as they change.

border-spacing    as simple list of lengthborder-top-color    as colorborder-top-width    as lengthbottom    as length, percentage, or calcclip    as rectanglecolor    as colorfont-size    as lengthfont-weight    as font weightheight    as length, percentage, or calcleft    as length, percentage, or calcletter-spacing    as lengthline-height    as either number or lengthmargin-bottom    as lengthmargin-left    as lengthmargin-right    as lengthmargin-top    as lengthmax-height    as length, percentage, or calcmax-width    as length, percentage, or calcmin-height    as length, percentage, or calcmin-width    as length, percentage, or calcopacity    as numberoutline-color    as coloroutline-width    as lengthpadding-bottom    as lengthpadding-left    as lengthpadding-right    as lengthpadding-top    as lengthright    as length, percentage, or calctext-indent    as length, percentage, or calctext-shadow    as shadow listtop    as length, percentage, or calcvertical-align    as lengthvisibility    as visibilitywidth    as length, percentage, or calcword-spacing    as lengthz-index    as integer 

 

It should be noted that not all attribute changes will trigger the effect of the transition action, such as the adaptive width of the page. When the browser changes the width, the effect of the transition will not be triggered. However, the property type changes shown above will trigger a transition action. 2. transition-duration: Syntax: transition-duration: <time> [, <time>] * transition-duration is used to specify the duration of the element conversion process. Valid value: <time> is a value in seconds or milliseconds. It can act on all elements, including the before and after pseudo elements. The default value is 0, that is, it is real-time during transformation. 3. transition-timing-function: Syntax: transition-timing-function: timing | linear | temperature-in | temperature-out | temperature-in-out | cubic-bezr (<number>, <number>, <number>, <number>) [, feature | linear | feature-in | feature-out | feature-in-out | cubic-bezr (<number>, <number>, <number>, <number>)] * value: the value of transition-timing-function allows you to change the conversion rate of the attribute value based on time, the transition-timing-function has six possible values: 1), slow :( gradually slow) the default value, and the Progress function is equivalent to the besell curve (0.25, 0.1, 0.25, 1.0 ). 2). linear: (uniform speed). The linear function is equivalent to the besell curve (0.0, 0.0, 1.0, 1.0 ). (3) callback-in: (acceleration). The callback-in function is equivalent to the besell curve (0.42, 0, 1.0, 1.0 ). 4) Forward-out: (deceleration). The forward-out function is equivalent to the besell curve (0, 0, 0.58, 1.0 ). (5) Merge-in-out: (acceleration and then deceleration). The transform-in-out function is equivalent to the besell curve (0.42, 0, 0.58, 1.0). 6), cubic-bezr: (this value allows you to customize a time curve), a specific cubic-bezr curve. (X1, y1, x2, y2) four values are specific to the Point P1 and point P2 on the curve. All values must be in the [0, 1] region; otherwise, they are invalid. The value of the attribute value in the "Conversion" process is calculated by using the béserx curve, as shown in the following curve, by changing P1 (x1, y1) and P2 (x2, y2) can change the Output Percentage of the entire process. The default value is default. You can use website tools. Other attributes of image: image 4. transition-delay: Syntax: transition-delay: <time> [, <time>] * transition-delay is used to specify the start time of an animation, that is to say, after changing the element property value, how long does the transition effect start? The value <time> is a value, in seconds or milliseconds ), its usage is very similar to transition-duration and can also act on all elements, including: before AND: after pseudo elements. The default size is "0", that is, the conversion is executed immediately without delay. Sometimes we want to change the transition effect of two or more css attributes, instead of changing the attribute of the css effect. We only need to concatenate several transition declarations and use commas (, "), and each of them can have their own different continuation time and their time rate conversion methods. However, it is worth noting that the values of transition-delay and transition-duration are both time values. Therefore, to distinguish the locations of these values in the write link, the browser generally determines the order of order, the first value can be resolved to the duration value of time as transition-duration, and the second value as transition-delay. 5. for short, here we can give transition a stenographer: transition: <property> <duration> <animation type> <delay>, as shown in: The image goes through the above, I think there are some concepts about the use of the Transition attribute in CSS3. The following is an example to enhance the transition memory.

<!DOCTYPE html>
 
The effect is as follows: jdfw demo address: 6. note on the use of transition (1) currently, all major browsers (including IE 10) support transition without a prefix, so transition can be safely excluded from the browser prefix. (2) Not all CSS attributes support transition. Check the complete list here and the specific effect. (3) The transition must be clear about the specific values of the start and end states before calculating the intermediate states. For example, if the height changes from 0px to 100px, transition can calculate the intermediate state. However, transition cannot calculate the intermediate state between 0 PX and auto. That is to say, if the start or end setting is height: auto, no animation effect will be generated. Similarly, display: none to block, background: url(foo.jpg(to url(bar.jpg), and so on. 7. Limitations of transition the advantage of transition is that it is easy to use, but it has several major limitations. (1) The transition must be triggered by an event, so it cannot automatically occur when the webpage is loaded. (2) The transition is one-time and cannot be repeated unless it is triggered repeatedly. (3) transition can only define the start and end states, but cannot define the intermediate states, that is, there are only two States. (4) A transition rule can only define changes to one attribute and cannot contain multiple attributes. CSS Animation was proposed to solve these problems. Ii. animation attributes are as follows: attribute description @ keyframes specifies the animation. Short attributes of all animation properties of animation, except the animation-play-state attribute. Animation-name specifies the name of the @ keyframes animation. Animation-duration specifies the seconds or milliseconds that an animation takes to complete a cycle. The default value is 0. Animation-timing-function specifies the animation speed curve. The default value is "renew ". Animation-delay specifies when the animation starts. The default value is 0. Animation-iteration-count specifies the number of times an animation is played. The default value is 1. Animation-direction specifies whether an animation is played reversely in the next cycle. The default value is "normal ". Animation-play-state specifies whether the animation is running or paused. The default value is "running ". Animation-fill-mode specifies the State beyond the animation time of the object. 2. We start with creating the basic elements of CSS animation. Any CSS animation has two main parts: defining an animation to assign it to a specified HTML element (or element ). 3. Define an animation (@ keyframes rule) 1) define an animation named drive: @ keyframes drive {} 2) define that a key frame animation is composed of key frames! In the @ keyframes Declaration, we have two methods to define it: The from and to keywords, or the percentage. A very simple animation may just move an object from one place to another. In this case, the from and to keywords are ideal for defining key frames.
@keyframes drive {    from {        transform: translateX(0);    }    to {        transform: translateX(400px);    }} 
 
Defines the key frame with a percentage, starting from 0% key frames and ending with 100%. Any number between 0% and 100% can define the key frame, so the usage of percentages is very flexible. Of course, if you like, you can also mix the percentage with from (equivalent to 0%) and to (equivalent to 100%.
@keyframes drive {    0% {        transform: translateX(0);    }    50% {        transform: translateX(200);    }    100% {        transform: translateX(400px);    }} 
 
Additionally, you do not have to list percentages in ascending order. A 0% key frame is still regarded as the first key frame of the animation, even if it is not arranged in order. 4. assign an animation to an HTML element. Once a key frame claim block is created, you must assign the animation to an HTML element or other element. We also need to define a brief attribute list for the HTML element, such as the img element, to apply the animation we just created for it. 1) animation-name specifies the name of the HTML element @ keyframes. For example, animation-name: drive; 2) animation-duration specifies the seconds or milliseconds that an animation takes to complete a cycle. The default value is 0. For example: animation-duration: 2 s; set these two attributes and the key frame we just defined before we can see the animation. The complete CSS of jdfw is written as follows:
car {    animation-name: drive;    animation-duration:1s;}@keyframes drive {    from {        transform: translate(0);    }    to {        transform: translate(400px);    }} 
 
. 3) animation-timing-function specifies the animation speed curve. The speed curve defines the time it takes for an animation to change from a set of CSS styles to another set. The speed curve is used to make the changes smoother. Animation-timing-function uses a mathematical function named Cubic besell to generate a speed curve. You can use your own value in this function or a predefined value: the speed from start to end of the linear animation demonstration address is the same. Default. The animation starts at low speed, then accelerates, and slows down before the end. The Animated-in animation starts at low speed. The seek-out animation ends at a low speed. The Animated-in-out animation starts and ends at low speed. Values of cubic-bezr (n, n) in the cubic-bezr function. The possible value is a value ranging from 0 to 1. You can use website tools. For our simple car example, I set the "timing function" value to internal-in: animation-time-function: Internal-in; 4) the animation-iteration-count attribute defines the number of times an animation is played. Syntax: animation-iteration-count: n | infinite; n indicates the number of times the animation is played. infinite specifies that the animation should be played infinitely. We have learned the most basic content of CSS animation. It covers a lot of content, but you soon find that the animation has different layers. When you want to save time while improving the animation, you need more things to help you control the animation. 5) The animation-delay attribute defines when the animation starts. The value of animation-delay is measured in seconds or milliseconds. Tip: Negative values are allowed. The animation starts immediately in-2 s, but the animation is skipped for 2 seconds. Wait for two seconds and start the animation: animation-delay: 2 s; jdfw. You may have noticed that at the end of the animation, our ball will return to its original position. This is not the ideal way to end an animation. When your object moves on the screen, you may want it to stop at the end, instead of returning to the original position. This is what animation-fill-mode can accomplish. Cleverly setting the value of the animation-delay attribute allows us to complete multiple animations. Next we will talk about it. 6) The animation-fill-mode attribute specifies whether the animation effect is visible before or after playback. Note: The attribute value is one or more fill mode keywords separated by commas. Syntax: animation-fill-mode: none | forwards | backwards | both; none does not change the default behavior. Forwards when the animation is complete, keep the last attribute value (defined in the last key frame ). Backwards applies the start attribute value (defined in the first key frame) before the animation is displayed within the period specified by animation-delay ). Both the forward and backward fill modes of both are applied. It is a combination of forwards and backwards. The animation can be the first key frame style before it starts, and then the style of the last key frame is maintained after the animation is completed. If you have set animation-delay and then set backwards animation-fill-mode: backwards;, the following effect is displayed: jdfw 7) the animation-direction attribute defines whether the animation should be played in turn. If the value of animation-direction is "alternate", the animation is played normally on an odd number of times (1, 3, 5, etc.), and on an even number (2, 4, 6, etc) play back. Note: If you set the animation to play only once, this attribute has no effect. By default, the value of animation-direction is normal. In addition, it can be equivalent to alternate, reverse, and alternate-reverse. For their meanings, see (assuming that the animation is played three times in a row ). Image 8) the animation-play-state attribute specifies whether the animation is running or paused. Note: You can use this attribute in JavaScript to pause the animation during playback. Syntax: animation-play-state: paused | running; paused indicates that the animation has been paused. Running specifies that the animation is playing. The default value is running. Note: JavaScript Syntax: when the object. style. animationPlayState = "paused" is hovering over the mouse, the label is rotated. When the mouse leaves, the rotation is stopped.
body {    padding:4em;     background: #fcfcfc;}.wrap {    width:200px;     margin:auto;     position:relative;}.msg {    color: whitesmoke;    text-align: center;    font-family: serif;    font-size: 3.5em;    width: 200px;    position: absolute;    margin: 55px 0 0 2px;    pointer-events: none;}.sticker {    width: 200px;    height: 200px;    position: absolute;    background: url(../images/sticker.png) top center no-repeat;    animation: spin 10s linear infinite;    animation-play-state: paused;}.sticker:hover {    animation-play-state: running;}@keyframes spin {     100% {transform: rotate(1turn); } }jdfw
 
9) The abbreviated order defined by W3C is as follows: <single-animation >=< single-animation-name >||< time >||< single-animation-timing-function >||< time >|< single-animationiteration -count> | <single-animation-direction> | <single-animation-fill-mode> | <single-animation-play-state> use shorthand for an element multiple animations are defined in, you need to use commas to separate the attribute values of each animation. For example, defining two animations in an element requires writing like this: animation: myAnimation 1 s memory-in-out 2 s 4, mytheranimation 4S memory-out 2 s; note: chronological order is very important when defining each Animation: the first value is resolved to the animation duration, and the second value is resolved to the animation latency. 5. Multiple animations. So far, we have discussed how to apply a single animation to a single element, but we can add more than one animation to the object as long as we need it. The most common method is to play the animation one by one. Cleverly setting the value of the animation-delay attribute allows us to use pure CSS to achieve this effect. We have a small medal rolled in from the left side, and then scaled before reaching the specified position. Jdfw demo address 6. Practical example 1) the play button that appears, the demo address jdfw 2) slide down the button, and the demo address jdfw1 finished ------