2017.12.06html notes 10

Nineth Chapter CSS3 Animation production
1.CSS3 Deformation transform
Syntax: transform:[transform-function] *;
Set the Morph function, which can be one or more, separated by a space in the middle
2. Deformation function
2.1 Translate (tx,ty): translation function, repositioning elements based on X, y coordinates
TranslateX (TX): Indicates that only the displacement of the x-axis is set
Translatey (ty: Indicates that only the displacement of the y-axis is set
2.2 Scale (Tx,ty): Zoom function to change the size of any element object
ScaleX (SX): Indicates only the scale of the x-axis is set
ScaleY (SY): Indicates that only the scaling of the y-axis is set
2.3 Rotate (a): rotation function, value is a degree value
Parameter a units use DEG to indicate
When parameter a takes positive values, the element rotates clockwise relative to the original center
2.4 Skew (Ax,ay): Tilt function, value is a degree value
SKEWX (AX): Indicates that only the tilt of the x-axis is set
Skewy (ay): Indicates that only the tilt of the y-axis is set
Note: the rotate () function simply rotates without changing the shape of the element
The skew () function is skewed, the element does not rotate, and the shape of the element is changed

3. Transition transition
3.1 Transition is a transition, is a process of animation conversion, such as fading, fading, animation speed, etc.
Syntax: Transition:[transition-property transition-duration transition-timing-function Transition-delay]
3.2 Transition Properties (Transition-property)
1) Define CSS property names for conversion animations
2) Take value
Property name: The specified CSS property (width, height, background-color property, and so on)
All: Specifies that all elements support the style of the Transition-property attribute, which is generally used for convenience all
3.3 Time required for transition (transition-duration)
Defines the length of time to convert an animation, from the time it takes to set the old property to the new property, in seconds (s)
3.4 Transition Animation function (transition-timing-function)
1) Specify the transition speed of the browser, and the progress of the operation during the transition, by adding a function to the transition to specify how fast or slow the animation
2) Take value
Ease: speed from fast to slow (default value)
Linear: Speed constant speed (uniform motion)
Ease-in: Faster and faster (fade effect)
Ease-out: Faster and slower (fade effect)
Ease-in-out: Speed first acceleration and deceleration (fade fade effect)

3.5 Transition Delay Time (transition-delay)
1) Specify the time at which an animation starts executing, and how long it takes to perform the transition effect when the element attribute value is changed
2) Take value
Positive value: The element transition effect is not immediately triggered and is not triggered until the set time value is crossed
Negative value: The element transition effect is displayed from that point in time, and the previous action is truncated
0: Default value, element transition effect executes immediately

3.6 Mechanism for transition triggering
1) pseudo-class triggering
: hover
: Active
: Focus
: Checked
2) Media query: Determine the device size, direction, etc. through the @media property
3) JavaScript trigger: Trigger with JavaScript script

3.7 Use steps
A. Declaring an element's initial state style in the default style
B. Declaring a transition element final state style, such as suspended state
C. Add some different styles in the default style by adding a transition function

4. Animation animation
4.1 Parts of implementing animations
A. Declaring an animation with a key frame similar to flash animation
B. Animating a keyframe declaration in the animation property to achieve a more complex animation effect
4.2 Setting KeyFrames
Syntax One:
@keyframes name {
The From {/*css style is written here */}
Percentage {/*css style is written here */}
To {/*CSS style written here */}
}
Syntax Two:
@keyframes name {
0% {width:0;}
33% {width:23px;}
66% {width:46px;}
100% {width:69px;}
}
Note: When writing compatibility, the browser prefix is placed in the middle of @keyframes
For example: @-webkit-keyframes, @-moz-keyframes

4.3 Calling keyframes
Animation:animation-name animation–duration animation-timing-function
Animation-delay Animation-iteration-count animation-direction
Animation-play-state Animation-fill-mode;

Animation-name: Animated name created by @keyframes
Animation–duration: Animation time
Animation-timing-function: Animation mode
Animation-delay: Delay Time
Animation-iteration-count: Number of animations played
Animation-direction: Playback direction of the animation
Animation-play-state: Playback Status of animations
Animation-fill-mode: Actions that occur before and after the animation starts
1) Number of animations played (Animation-iteration-count)
A. The value is usually an integer, the default value is 1
B. Special value infinite, which means that the animation plays infinitely
2) Playback direction of the animation (animation-direction)
A.normal, animations are looped forward every time
B.alternate, the animation plays as an even number of times to play forward
3) Playback status of the animation (animation-play-state)
A.running to replay a paused animation
B.paused the element animation that is playing
4) Actions that occur with animations (Animation-fill-mode)
A.forwards indicates where the last keyframe will continue to be applied after the animation has ended
B.backwards indicates that the initial frame of the animation is applied quickly when an animation style is applied to an element
C.both indicates that the element animation has both forwards and backwards effects

2017.12.06html notes 10