CSS3 Transitions, Transforms and Animation usage, css3transitions

CSS3 Transitions, Transforms and Animation usage, css3transitions
I. Preface

Several attributes related to CSS3 animation are: transition, transform, and animation, which are understood as transition, transformation, and animation. Although the meaning is similar, the specific functions differ from the work undertaken in CSS3.

Transition refers to the transition, that is, from point A to point B. It has time and is continuous. It is generally applicable to general CSS attributes. transform refers to the transformation, which contains several fixed attributes: rotation, scaling, offset, and so on. However, the effect is very dry and mechanical rotation and movement. if combined with the transition attribute, the transformation will be smooth. Animation is first used in Safari. This attribute is extended by the transition attribute in Introduction. However, this simple introduction contains the non-simple things: keyframes.

 

Ii. Transition

CSS3 transition is a simple animation attribute. It can be said that it is a simplified version of animation and is used for simple webpage special effects. Its function is to smoothly change the CSS value. Whether it is a click event, a focus event, or a mouse hover, as long as the value changes, it is smooth, it is an animation. Therefore, it is very useful for a class that is commonly used throughout the entire site to easily and incrementally enhance the animation effect.

For example, you have the following two styles:

.position{    left:100px;    top:100px;}.animate{    -webkit-transition:left 0.5s ease-out;    left:500px;    top:500px;}

 

The transition attribute of animate means that when your left attribute changes, the animation effect is executed (only based on the left attribute change, other attributes are not included in the animation changes ).

First, the css of your element is position. When you add animate to its cssList or replace position with animate, the attribute changes of the element trigger webkit-transition and the value before the attribute change is the starting value, the changed attribute is the ending value and the animation effect is executed. This is a simple process of two changes, greatly simplifying the complexity of the animation attribute.

At the same time, if the attribute value changes in the transition animation, the current animation execution will be interrupted, the attribute values at the time of interruption are provided to the new animation as the starting value to calculate the new animation effect.

 

Transition has the following specific attributes:

Transition-property: * // specifies the nature of the transition. For example, transition-property: backgrond indicates that backgound participates in the transition.
Transition-duration: * // specifies the duration of the transition.
Transition-delay: * // delay transition time
Transition-timing-function

The following is a simple example:

.trans {    -webkit-transition-property: background-color;    -webkit-transition-duration: 0.3s;    -webkit-transition-timing-function: ease;}.trans:hover {    background-color: #486AAA;    color: #fff;}

Just like the background attribute of CSS2, we usually do not share the transition attributes one by one, but merge them.

In the preceding example, the transition attribute is merged and several browsers are extended. The following CSS code is used:

.trans {    ...    -webkit-transition: background-color 0.3s ease;    -moz-transition: background-color 0.3s ease;    -o-transition: background-color 0.3s ease;    transition: background-color 0.3s ease;}.trans:hover {    background-color: #486AAA;    color: #fff;}

The transition-timing-function attribute in transition is very important, the heap embedding-related values (linear | memory-in | memory-out | memory-in-out | cubic-bezr) are not easy to understand.

First of all, you don't need to worry about the cubic-bezr. This is not used in most cases. (If you want to study it on your own, I will never tell you that this refers to the besell curve, is related to complicated mathematics ......). Linear is Linear. As for the remaining three items, they refer to the easing effect. To put it bluntly, it refers to the slow start or the slow end. The slow-in means the slow start and the fast end; slow-out indicates fast and slow; slow-in-out indicates slow and fast.

(Note: No matter when and when the delay is reached at the same time, the completion time is only related to the transition-delay attribute ).

 

Iii. Transform

Transform refers to the conversion. People who have used PS should know the Ctrl + T free conversion in it. Transform refers to this thing, that is, stretching, compression, rotation, offset, and so on.

See the following sample code:

.trans_skew { transform: skew(35deg); }.trans_scale { transform:scale(1, 0.5); }.trans_rotate { transform:rotate(45deg); }.trans_translate { transform:translate(10px, 20px); }

If the transform attribute is added with the transition feature of the transition, it will be even more powerful. For example, in the following example, the key code is as follows:

.trans_effect {    -webkit-transition:all 2s ease-in-out;    -moz-transition:all 2s ease-in-out;    -o-transition:all 2s ease-in-out;    -ms-transition:all 2s ease-in-out;        transition:all 2s ease-in-out;}.trans_effect:hover {    -webkit-transform:rotate(720deg) scale(2,2);    -moz-transform:rotate(720deg) scale(2,2);    -o-transform:rotate(720deg) scale(2,2);    -ms-transform:rotate(720deg) scale(2,2);    transform:rotate(720deg) scale(2,2);        }

As a result, in Chrome and Safari, The zooming and rotating effects of frogs in Zuma are displayed.

In some test cases, each time the transform attribute is presented, it seems to be animated. This makes a small part of intuitive thinking people (including me) Think That the transform attribute is an animated attribute. On the contrary, the transform attribute is a static attribute. Once written into the style, it will be directly displayed without any change process. The main purpose of transform is to perform special deformation of elements. It is not a stranger to the designers. in simple words, it is the css graphic deformation tool.

The origin setting in the basic condition of graph deformation is defined by transform-origin in css. The origin of this definition should be calculated based on the 0, 0 in the upper left corner of the css element (to be studied ). Other attributes are calculated based on this attribute.

The transform-style is defined in the css3 standard. The default value is flat, which shows a simple effect. The preserve-3d presents the space in 3d mode. From the normal mind, it should be just preserve-3d, but from the rumor that "perserve-3d is enabled using GPU acceleration", this attribute may be used to reduce system consumption, after all, 3d has one more dimension than 2d.

To use the 3d mode, you must first specify the style as 3d, and add the perspective and perspective-origin on any parent element to specify the perspective point.

Specifically, there are five attributes for the designer to change the element style:

Translate3d (x, y, z) is used to control the Three-Axis Position of the element on the page;

Rotate (deg) is used to control the Rotation Angle of elements;

The skew [x, y] (deg) attribute is used to make the skew. People who have done design may know that this attribute is required to create a 3d perspective in 2d;

Scale3d (x, y, z) is used to zoom in and out the effect. The attribute is the ratio;

Matrix3d, css matrix. This matrix attribute covers all the attribute values above, but I personally think that the readability is very poor (all are numbers and units, and the back is a bit fuzzy). We recommend this attribute for no reason at present.

In general, the attributes of css transform are no different from those of left, right, top, and bottom, therefore, transform should be classified into the static attributes of such positioning deformation.

 

Iv. Animations

Anyone who has done Flash Animation knows that Flash has two basic weapons: timeline and key frames. The emergence of css keyframes provides a collection of these two attributes in the flash world. Let's look at a simple example of keyframes:

@keyframes 'wobble'{  0%{   left:100px}   30%{   left:300px;}  100%{   left:500px;}}.animate{    left:100px;   -webkit-animation:wobble 0.5s ease-out;   -webkit-animation-fill-mode:backwards;}

The above code shows a keyframes 'wobble ', where 0% represents the attribute values at different time points in the change. You can control the attribute effects at any time point in the animation change more accurately. Animation calculates the attributes of an element animation Based on the attribute change method provided by keyframes. Different from transition, keyframes provides more control, especially timeline control, which makes css animation more powerful and allows some animation effects of flash to be directly controlled by css, all this requires only a few lines of code. Therefore, a large number of css-based animation tools are generated to replace the animation part of flash.

In addition, the most important attribute in the animation attribute is: animation-fill-mode, which indicates whether the style specified by (from/0%) is still (to/100%) the specified style is the style after the animation is completed. This allows us to easily control the animation ending style to ensure the overall coherence of the animation.

 

See the following code example:

@-webkit-keyframes resize {    0% {        padding: 0;    }    50% {        padding: 0 20px;        background-color:rgba(190, 206, 235, 0.2);            }    100% {        padding: 0 100px;        background-color:rgba(190, 206, 235, 0.9);    }}.anim_box:hover {    -webkit-animation-name: resize;    -webkit-animation-duration: 1.5s;    -webkit-animation-iteration-count: 4;    -webkit-animation-direction: alternate;    -webkit-animation-timing-function: ease-in-out;}

In this example, the animation is executed only four times when the mouse is hovering.

The effect is roughly as follows. The default is a rectangle frame:

After moving the mouse up, the display slowly increases the width, then suddenly increases the width quickly, and the background color is deepened. The following figure shows the animation process:

 

 

Animations not only applies to attributes in CSS2, but also supports CSS3, such as box-shadow box shadow effects. Therefore, we can achieve the luminous effect.

 

 

The luminous effect is as follows:

The CSS code is as follows:

@-webkit-keyframes glow {    0% {        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 0.5);        border-color: rgba(160, 179, 214, 0.5);             }    100% {        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 1.0), 0 0 18px rgba(0, 140, 255, 1.0);        border-color: rgba(160, 179, 214, 1.0);     }}.anim_image {    padding:3px;    border:1px solid #beceeb;    background-color:white;    -moz-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);    -webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);    box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);}.anim_image:hover {    background-color:#f0f3f9;    -webkit-animation-name: glow;    -webkit-animation-duration: 1s;    -webkit-animation-iteration-count: infinite;    -webkit-animation-direction: alternate;    -webkit-animation-timing-function: ease-in-out;    }

V. browser support

CSS Transitions

First Introduction

Safari 3.2: 13/11/2008

Firefox 4.0: Late 2010

Google Chrome 1.0: 02/09/2008

Opera 10.5: 02/03/2010

CSS 2D Transformations

First Introduction

Safari 3.2: 13/11/2008

Firefox 3.5: 30/06/2009

Google Chrome 1.0: 02/09/2008

Opera 10.5: 02/03/2010

Internet ipve 9: 09/2010

CSS Animations

First Introduction

Safari 4.0: 11/06/2008

Google Chrome 1.0: 02/09/2008

CSS 3D Transformations

First Introduction

Safari 4.0: 11/06/2008

Chrome: 28/08/2010