Implementation steps of animation technology in CSS3

If you need to achieve animation effects in CSS3, three technologies will be used, transform-origin, transition, transition-delay and transition-timing-function. Today I will give you a clear idea and see how to achieve animation effects. .

1. transform-origin

The origin of CSS transformation is the center point of the object by default. transform-origin accepts two parameters, which can be specific values ​​such as percentage, em, px, etc., or keywords such as left, right, center, top, middle, bottom, etc.

For example:

transform-origin: top right;-o-transform-origin: top right;-moz-transform-origin: top right;-webkit-transform-origin: top right ;

transform-origin: 0 0;-o-transform-origin: 0 0;-moz-transform-origin: 0 0;-webkit-transform-origin: 0 0;

transform-origin: 0 100%;-o-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-webkit-transform-origin: 0 100%;

transform-origin : 50% 100%;-o-transform-origin: 50% 100%;-moz-transform-origin: 50% 100%;-webkit-transform-origin: 50% 100%;

2. transition--transition

1.transition-property: The name of the CSS property that defines the transition animation. Can be none|all|CSS property list.

For example:

transition-property:background-color;-o-transition-property:background-color;-moz-transition-property:background-color;-webkit-transition-property :background-color;

2.transition-duration: Define the length of the transition animation.

For example:

transition-duration: 3s;-o-transition-duration: 3s;-moz-transition-duration: 3s;-webkit-transition-duration: 3s;

3.transition-delay: Define the delay time of the transition animation.

For example:

transition-delay: 3s;-o-transition-delay: 3s;-moz-transition-delay: 3s;-webkit-transition-delay: 3s;

4.transition-timing-function: Define the effect of transition animation.

The value can be:

ease: relief effect.

ease-in: Gradient effect.

ease-out: fade effect.

ease-in-out: fade-in and fade-out effect.

linear: linear effect.

cubic-bezier: Special cubic Bezier curve effect. cubic-bezier(0.3, 0, 0.5, 1.0).

For example:

transition-timing-function: linear; -o-transition-timing-function: linear;-moz-transition-timing-function: linear;-webkit-transition-timing -function: linear;

3. animation

1.animation-name: animation name.

2.animation-duration: animation time.

3.animation-timing-function: animation playback method.

4.animation-delay: animation start playback time.

5.animation-iteration-count: Number of plays. infinite means infinite times. .

6.animation-direction: animation playback direction. normal--each cycle of the animation goes forward alternate--even times forward, odd times backward.

For example:

div {
-webkit-transform-style: preserve-3d;
-webkit-animation-name: ani;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
/* 下面调用动画 */
@-webkit-keyframes ani {
0% {
-webkit-transform: rotateX(0deg);
}
25% {
-webkit-transform: rotateX(180deg);
}
50% {
-webkit-transform: rotateX(360deg);
}
75% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(360deg);
}

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

CSS3’s detailed introduction to the background-size attribute

CSS3’s detailed introduction to the translate attribute

Detailed introduction to the filter attribute of CSS3

The above is the detailed content of Implementation steps of animation technology in CSS3. For more information, please follow other related articles on the PHP Chinese website!