transition
With css3, you can add transition attributes to elements without using flash animation or javascript to have an animation (transition) effect when changing from one style to another . It is often used in conjunction with the :hover pseudo-class.
transition: the transition attribute spends time motion curve (default ease) start time (default 0s);
IE10, Firefox, Chrome and Opera support the transition attribute. Safari requires the prefix -webkit-. Chrome 25 and earlier versions need to add the -webkit- prefix. IE9 and earlier versions do not support the transition attribute.
Related attributes introduction
- transition-property: Specifies the name of the CSS property that needs to be transitioned. You can use the name of the attribute that needs to be transitioned, or you can use all (default) to indicate that all changed attributes are added with a transition effect or none indicate that the element does not add a transition effect.
- transition-durstion: Specifies the time (in seconds or milliseconds) that it takes to complete the transition effect. The default is 0, so this attribute is required to add a transition .
- transition-timing-function: Specifies the speed curve of the transition effect. The default value is ease. The meanings of different attribute values are as follows.
- transition-delay: Specifies the moment when the transition effect starts. The default is 0s.
- Transition: property duration timing-function delay; shorthand property, must be written in this order. It is not necessary to write an attribute value in it, but the duration attribute value must be present .
Note: When using shorthand properties to add multiple transition effects, you can use commas to separate them . You cannot write two transition attributes in the same element, otherwise style cascading will occur. E.g
<style>
div:nth-child(1){
margin-left: 200px;
margin-top: 200px;
float: left;
width:100px;
height:50px;
background:blue;
transition:width 2s linear,transform 2s linear;
}
div:nth-child(2){
margin-top: 200px;
float: left;
width:100px;
height:50px;
background: black;
}
div:hover {
width:200px;
transform: translateY(50px);
}
</style>
<body>
<div></div>
<div></div>
</body>
| value | description |
|---|---|
| linear | Specifies the transition effect starting to ending at the same speed (equal to cubic-bezier(0, 0, 1, 1)). |
| ease | The transition effect (cubic-bezier(0.25, 0.1, 0.25, 1)) is specified to start at a slow speed, then become faster, and then end at a slow speed. |
| ease-in | Specifies the transition effect that starts at a slow speed (cubic-bezier(0.42, 0, 1, 1)). |
| ease-out | Specifies the transition effect that ends at a slow speed (cubic-bezier(0, 0, 0.58, 1)). |
| ease-in-out | Specifies the transition effect that starts and ends at a slow speed (cubic-bezier(0.42, 0, 0.58, 1)). |
| cubic-bezier(n,n,n,n) | Define your own value in the cubic-bezier function. The possible values are between 0 and 1. |
The self-defined value of cubic-bezier(n,n,n,n) involves knowledge and understanding of Bezier curves.
Animation
You can set multiple nodes to precisely control the style of one or a group of attributes to change to another style to achieve complex animation effects. Compared with transition, animation can achieve more changes, more control and continuous automatic playback and other effects .
IE10, Firefox, and Opera browsers support @keyframes rules and animation attributes. Chrome and Safari need the prefix -webkit -. IE9 and earlier versions do not support @keyframes rules and animation attributes.
- Using @keyframes rules to define animations, you can change any number of styles any number of times. Use percentages to specify when the different phases of the animation sequence occur. 0% (from) is the beginning of the animation, and 100% (to) is the end of the animation.
@keyframes myfirst
{
0% {
background: red; left:0px; top:0px;}
25% {
background: yellow; left:200px; top:0px;}
50% {
background: blue; left:200px; top:200px;}
75% {
background: green; left:0px; top:200px;}
100% {
background: red; left:0px; top:0px;}
}
/*定义动画时指明动画名和动画序列*/
-
animation: Shorthand properties of all animation properties (except animation-play-state properties). The six properties that can be set are as follows:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
The first two are required attribute values.
-
animation-name : Specifies the name of the keyframes that need to be bound to the selector.
-
animation-duration : Specifies the time it takes to complete an animation cycle, the default is 0s.
-
animation-timing-function : Specifies the speed curve of the animation, the default is "ease". The value and effect are the same as the transition. (This setting is the speed curve inside each segment of the animation sequence. The time used in different stages of the animation is related to its percentage.)
-
animation-delay : Specifies the start time of the animation, the default is 0s.
-
animation-iteration-count : Specifies the number of times the animation is played , the default is 1, and any integer value and infinite (infinite loop playback) can be set .
-
animation-diretion : Specifies whether the animation will be played in reverse in the next cycle, the default is normal. altermate plays in reverse .
-
animation-play-state : Specifies that the animation is running or paused running/paused.
-
animation-fill-mode : Specifies whether the state after the animation ends is to stay in the final state or return to the original state forwards/backwards .
The value of the animation-timing-function property can be steps (number of steps)
Still use the above code, just add animation to the second box, as follows:
@keyframes animation1{
0%{
width:100px;}
25%{
width:300px;}
50%{
width:500px;}
75%{
width:700px;}
100%{
width:900px;}
}
div:nth-child(2){
margin-top: 200px;
float: left;
width:100px;
height:50px;
background: black;
animation: animation1 28s ;
}
The animation used in this example only sets two property values. Animation-name and animation-duration I only recorded about half of the process. Just to illustrate that the animation-timing-function attribute is for each stage of the animation sequence, that is, the 0%~25% stage accounts for 25% of the total time for 7 seconds. In these 7s, its speed curve is ease. The meanings of other attributes are particularly obvious, and they are not demonstrated one by one.
Dust / 2020/12/22