Catalog
1. transition-property ** must be set **
2. transition-duration (duration of transition attributes)
3. transition-delay (Delay Effect Execution Time)
4. transition-timing-function (transitional motion curve)
- Bessel curve learning. Query website
5. transition (global assignment)
1.animation-name (specifying the name of @keyframes animation)
2.animation-duration (animation single cycle time)
4.animation-timing-function (speed curve of animation)
5.animation-play-state (animation state change)
7.animation-iteration-coun (playback times)
First, the transition
Transition-Learning+Online Implementation
concept
Adding some effect allows the object to change its style after triggering.
Transitional attribute
1. transition-property ** must be set **
Note: Single transition mode triggers instantaneous change
/* transition-property: all | [css1 [...]]; */ transition-property: width, height;
| value | describe |
|---|---|
| none | Transition effects are achieved without attributes. |
| all | All attributes will have transitional effects. |
| property | Define a list of CSS attribute names that apply transitional effects, separated by commas. |
2. transition-duration (duration of transition attributes)
Note:
- Set the transition time. When the change is triggered, it will continue to change at a specified time.
- Usually change 0.2-0.3s
- Setting time'0'can be omitted
transition-duration: <time>; It specifies the time (in seconds or milliseconds) required to complete the transition effect. The default value is 0, which means it won't work. transition-duration: .3s;
3. transition-delay (Delay Effect Execution Time)
transition-delay: <time>; Wait for switching effects to start before specifying seconds or milliseconds transition-delay: 2s;
4. transition-timing-function (transitional motion curve)
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
| value | describe |
|---|---|
| linear | The transition effect from start to end at the same speed is specified (equal to cubic-bezier(0,0,1,1)). |
| ease | The transition effect of starting slowly, then speeding up, and then ending slowly (cubic-bezier(0.25,0.1,0.25,1)). |
| ease-in | Provide a transition effect starting at a slow speed (equal to cubic-bezier(0.42,0,1,1)). |
| ease-out | Provide a transition effect at a slow end (equal to cubic-bezier(0,0,0.58,1)). |
| ease-in-out | The transition effect of starting and ending at a slow speed is specified (equal to cubic-bezier(0.42,0,0.58,1)). |
| cubic-bezier(n,n,n,n) | Bessel curve function defines its own value in cubic-bezier function. Possible values are between 0 and 1. |
- Bessel curve learning. Query website
5. transition (global assignment)
transition: property duration timing-function delay; transition: width 2s;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>excessive</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: orange;
/*excessive*/
/*Duration*/
/*Both come and go have excessive effects.*/
transition-duration: .5s;
/*delay time*/
/*transition-delay: 1s;*/
/*Overattributes: all*/
/*transition-property: width, height;*/
/*Overcurve*/
/*transition-timing-function: linear;*/
/*Overall setup*/
/*transition: all .3s .1s linear;*/
transition: .3s cubic-bezier(0,.99,0,.99);
}
.hover {
width: 200px;
height: 200px;
margin: 0 auto;
}
/*Processing that can create a second state*/
.hover:hover .box {
width: 400px;
height: 190px;
background-color: red;
/*Going to the second state has an excessive effect.*/
/*transition-duration: .1s;*/
}
.box:active {
}
</style>
</head>
<body>
<!-- excessive:The process of changing from one state to another by animation is called excess. -->
<!-- Excessive effect through hover produce,You can make one. hover layer -->
<!-- hover Layer Processing:The same area size as the display layer -->
<!-- Similarly, the location of the display layer can be intersected hover Layer processing -->
<div class="hover">
<div class="box"></div>
</div>
</body>
</html>
Two, animation
Animation-Learning+Online Implementation
Animation attributes
1.animation-name (specifying the name of @keyframes animation)
animation-name: keyframename|none; animation-name:mymove;
| value | Explain |
|---|---|
| keyframename | Specifies the name of the key frame to bind to the selector |
| none | Specifies whether there are animations (which can be used to cover animations from cascades) |
2.animation-duration (animation single cycle time)
animation-duration: time; Specifies the time taken to complete the animation play. The default value is 0, which means there is no animation effect. animation-duration:2s;
3.animation-delay
animation-delay: time; Optional. Define the waiting time before the animation starts, in seconds or milliseconds. The default value is 0 animation-delay:2s;
4.animation-timing-function (speed curve of animation)
/* animation-timing-function: value;*/
/* Standard grammar */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
#div1 {-webkit-animation-timing-function:cubic-bezier(0,0,0.25,1);}
#div2 {-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function:cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function:cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);}| value | describe |
|---|---|
| linear | The speed of animation is the same from beginning to end. |
| ease | Default. The animation starts at a low speed, then speeds up and slows down before the end. |
| ease-in | The animation starts at a low speed. |
| ease-out | The animation ends at a low speed. |
| ease-in-out | Animation starts and ends at a low speed. |
| cubic-bezier(n,n,n,n) | Its own value in the cubic-bezier function. Possible values range from 0 to 1. |
5.animation-play-state (animation state change)
/* animation-play-state: paused|running;*/ Paused: Specifies paused animation Running: Specifies the animation that is running
6.animation-fill-mode
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
| value | describe |
|---|---|
| none | Default value. Animation does not apply any style to the target element before and after the animation is executed. |
| forwards (endpoint) | At the end of the animation (determined by animation-iteration-count), the animation will apply the attribute value. |
| backwards (starting point) | The animation will be applied to the attribute values defined in the key frames of the first iteration of the animation during the animation-delay definition. These are values in the from key frame (when animation-direction is "normal" or "alternate") or to key frame (when animation-direction is "reverse" or "alternate-reverse". |
| both | Animation follows forward and backwards rules. That is to say, animation expands animation attributes in two directions. |
| initial | Set this property to its default value. |
| inherit | Inherit this property from the parent element. |
7.animation-iteration-coun (playback times)
animation-iteration-count: value; <count>: A number that defines how many animations should be played infinite: Specify that the animation should be played infinitely (forever)
8.animation-direction
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
| value | describe |
|---|---|
| normal | Default value. The animation is playing normally. |
| reverse | The animation is played back. |
| alternate | Animation is played forward odd times (1, 3, 5...) and backward even times (2, 4, 6...). |
| alternate-reverse | Animation is played back odd times (1, 3, 5...) and forward even times (2, 4, 6...). |
| initial | Set this property to its default value. |
| inherit | Inherit this property from the parent element. |
Animated body
/*Animation properties are set to the specified selector label, and the animation body is set separately in the style.*/
@keyframes <name>{
/*from When no property settings are written, all initial values (initial state) are taken by default.*/
from{}
to{}
}
@keyframes <name>{
0% {}
...
100% {}
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>animation</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: orange;
}
/*Animation style*/
.box {
/*Binding animation names*/
animation-name: wasai;
/*Duration*/
animation-duration: 1s;
/*delay time*/
/*animation-delay: .1s;*/
/*Animation End Stay Position: Backs Start, forwards End*/
/*animation-fill-mode: forwards;*/
/*Numerous times infinite*/
animation-iteration-count: 4;
/*Rules of Multiple Directions of Motion*/
/*alternate:back and forth*/
/*alternate-reverse:Endpoint begins to come and go*/
/*animation-direction: alternate-reverse;*/quotes: ;
/*Animation state running*/
/*animation-play-state: paused;*/
/*Overall setup*/
animation: wasai 1s 2 linear alternate;
}
.box:hover {
animation-play-state: running;
}
/*Animated body*/
@keyframes wasai{
0% {}
100% {width: 400px;}
}
@keyframes wasai1{
0% {}
100% {}
}
@keyframes wasai2{
0% {}
100% {}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>