Early in the web In order to achieve animation effect , All depend on JavaScript or flash To complete , But in the css3 A new module has been added in transition, It can be done through some simple css Event to trigger the appearance change of an element , Let the effect appear more delicate . In short , It's through
Mouse click , Get focus , Hit , Or on any change to the element , And change smoothly with animation css Property value

stay css You can create a simple transition effect in the following steps

(1) Declare the initial state style of an element in the default style

(2) Declare transition element final state style , For example, in suspension

(3) In the default style, by adding a transition function , Add some different styles

1 css Deformation properties

transform Refers to a set of transformation functions ,transform-origin Property specifies where the center point of the element is , A third number has been added transform-origin-z Controls the center point of the element's 3D space .transform-style The value of is set to preserve-3d, Build a 3D Rendering environment
transform The basic syntax for properties is as follows : transform:none|[transform-function]|transform-function]....
Can be used for inline and block elements . The default value is none, Indicates that the element does not deform . Another attribute value is a series of deformation functions , Represents one or more morphing functions , With space
separate ; Represents multiple attribute operations that deform an element at the same time , for example rotate,scale,translate etc. translate():
Moving elements , According to X Axis and Y Axis coordinates repositioning elements . On this basis, there are two extension functions translateX() and translateY();
scale(): Zoom out or method element , You can use element sizes to change , On this basis, two extension functions are used scaleX() and scaleY(); rotate():
Rotating elements , The parameter value is the rotation angle value (360deg) skwe(); Tilt elements . On this basis, there are two extension functions skewX() and skewY()
matrix(): Define matrix deformation , be based on X Axis and Y axis
transform-origin Property to specify the location of the center point of the element . By default , deformation
The origin of is at the center of the element , Or elements X Axis and Y Axial 50% place ,transform-origin The syntax format of is as follows :
transform-origin:[percentage | length |  left | center | right | top | bottom]

It should be noted that transform You can set only one value You can also set two values And three values
transform-style Property is 3D space An important attribute of , Specifies how nested elements are placed in the 3D Presentation in space There are two main attribute values ,flat and preserve-3D

2 Transition properties transition
css3 Of transition The function is very simple :
css3 Of transition allow css The value of the attribute is smoothly transferred in a certain time interval . This effect can be achieved by clicking with the mouse , Get focus , Triggered by a click or any change to an element , And change smoothly with animation css Property value of
css3 The transition is declared with the regular style on the element . As soon as the target property changes , The browser will apply the transition . In addition to using JavaScript Besides trigger action , stay css Can also be triggered by some pseudo classes , as :hover,:focus,:active,:target and :checked etc .
Here's how to use css Steps to create a simple transition to love you : (1) Declare the initial state style of an element in the default style (2) Declare transition element final style , For example, in suspension
(3) In the default style, by adding a transition function , Add some different styles .
css Transition properties
The transition attribute is a composite attribute , It mainly includes the following attributes

* transition-property: That specifies the transition or dynamic simulation css attribute
* transition-duration: Specify the time required to complete the transition
* transition-timing-function: Specifies the transition function
* transition-delay: Specifies the delay time that begins to appear
(1)transition-property attribute

transition-property Used to specify the transition animation CSS Property name , The transition attribute only has a midpoint value ( Properties that need to be animated ) In order to have transition effect .

To change the width attribute of an element , Can be transition-property The property of is set to width

-webkit-transition-property: width; transition-property: width;

(2)transition-duration attribute

transition-duration Property is mainly used to set the time required for one property to transition to another , This is the length of time it takes to transition from an old attribute to a new one , Commonly known as duration

If you change an attribute , The duration is 50ms, You can set the value of the property to 50ms

-webkit-duration: 50ms; transition-duration: 50ms;

(3) transition-timing-function attribute

transition-timing-function Attributes are transitional “ Slow moving function
”. It is mainly used to specify the transition speed of browser , And the operation progress during the transition period , The following functions should be included :

(4)transition-delay attribute

transition-delay Properties and transition-duration The properties are very similar , The difference is that transition-duration Is the duration used to set the transition animation , and transition-delay It is mainly used to specify the start time of an animation , That is to say, when
How long does the execution start after changing the element attribute value .

For example, the width of the element is changed from 100px Become 300px

<style> div { width:100px; height:100px; background:blue; transition:width 2s;
-moz-transition:width 2s ease-in; /* Firefox 4 */ -webkit-transition:width 2s
ease-in; /* Safari and Chrome */ -o-transition:width 2s ease-in; /* Opera */ }
div:hover { width:300px; } </style>
(5) transation The limitations of

transition The advantage of this method is simple and easy to use , But it has several big limitations . 
(1)transition Event triggering is required , So it can't happen automatically when the web page loads . 
(2)transition It's disposable , It can't happen repeatedly , Unless it's triggered again and again . 
(3)transition Only start and end states can be defined , Intermediate state cannot be defined , In other words, there are only two states . 
(4) One transition rule , Only one property change can be defined , Multiple properties cannot be involved . 
CSS Animation It is in order to solve these problems .

3  animation animation

(1)@keyframes rule

keyframes It's called keyframes , It is similar to flash Keyframes in . stay css3 Among them, the “@keyframes" start , After the full is followed by the animation name plus a pair of curly brackets {...}, In brackets are some rules for different time periods

In a "@keyframes" Style rules in can have multiple percentages , As in ”0%" reach "100%" Create more percentages between , Add different styles to the elements that need to be animated in each percentage , In order to achieve a constantly changing effect .

Experience and skills : stay @keyframes When the animation name is defined in , among 0% and 100% You can also use keywords from and to To represent , among 0% The corresponding is from,100% The corresponding is to

@keyframes changecolor{ 0%{ background: red; } 20%{ background:blue; } 40%{
background:orange; } 60%{ background:green; } 80%{ background:yellow; } 100%{
background: red; } }

(2) animation attribute

animation-name attribute
It is mainly used to call @keyframes Well defined animation , Special attention is needed :animation-name The animation name called requires and "@keyframes“ The animation names defined are exactly the same ( Case sensitive ), If not, there will be no animation

be careful : Need to be in Chrome and Safari On the basis of the above plus -webkit- prefix ,Firefox add -moz-.

animation-duration attribute
It is mainly used to set CSS3 Animation playback time , Its use method and transition-duration similar , Is used to specify the length of time that the element plays the animation , That is to say, to finish from 0% reach 100% The time required for one animation

animatino-timing-function attribute
It is mainly used to set animation playback mode . It mainly allows elements to change the transformation rate of attributes according to the advance of time , It's the way animation is played . It and transition Medium transition-timing-function
The values in are the same

animation-delay attribute
Used to define when the animation starts playing , The time point used to trigger animation playback . and transition-delay The properties are the same , Defines the time to wait before the browser starts to perform animation .

animation-iteration-count attribute
It is mainly used to define the number of times the animation is played , It is usually an integer , A single page can be a decimal , The default value is 1, This means that the animation will play only once from the beginning to the end ; If the value is infinite, The animation will play infinitely .

animation-direction Property is mainly used to set the animation playback direction , There are two main values :normal,alternate

normal Is the default value , If set to normal Time , The animation plays forward every time it loops

The other is alternate, His role is , The animation plays forward the even number of times , The odd number of plays in the opposite direction

animtion-play-state Property is used to control the playback state of an element's animation . There are two main values :running and paused.

among running Is its default value , You can use this value to reexamine the suspended animation , The replay here doesn't have to start at the beginning of the element animation , It starts at the tentative location . If the animation is tentatively played . The style of the element is returned to its original state

animation-fill-mode Property defines what happens before and after the animation begins and ends . There are mainly four attribute values :none,forwards,backwords and both. The corresponding effects of the four attribute values are as follows :

Property value



Default value , Indicates that the animation will proceed and end as expected , When the animation completes its last frame , The animation is reversed to the initial frame


Indicates where the last keyframe continues to be applied after the animation is finished


The initial frame of the animation is applied quickly as the animation style is applied to the element


Element animation has both forwards and backwards effect

By default , Animation does not affect attributes other than its keyframes , use animation-fill-mode Property to modify the default behavior of an animation . Simply put, tell the animation to wait for the animation to start at the first keyframe , Or stop at the last keyframe at the end of the animation without returning to the first frame of the animation . Or both .

Finally, let's sum up :

animation Properties are similar to transition, They all change the attribute values of elements over time , The main difference is that : use transition Property can only be passed by specifying the initial state and end state of the property , Then the animation is realized by smooth transition between the two states ;animation Without triggering any events , You can also change elements explicitly over time CSS attribute , To achieve an animation effect

4  Animation related events

-webkit-animation Animation has three events :
    Start event webkitAnimationStart
    end event webkitAnimationEnd
    Repetitive motion events webkitAnimationIteration

css3 Transition properties of transition, At the end of the animation , There are also ending events :webkitTransitionEnd(translation There is only one event )

©2019-2020 Toolsou All rights reserved,
It's unexpected Python Cherry tree (turtle The gorgeous style of Library )Unity3D of UGUI Basics -- Three modes of canvas os Simple use of module computer network --- Basic concepts of computer network ( agreement , system )html Writing about cherry trees , Writing about cherry trees Some East 14 Pay change 16 salary , Sincerity or routine ?Unity-Demo Examples ✨ realization UI- Backpack equipment drag function 06【 Interpretation according to the frame 】 Data range filtering -- awesome java Four functional interfaces ( a key , simple )