The implementation of the ToolTip animation effect of CSS3---transform&transition

Summary of Knowledge points:

1, the element set absolute positioning will automatically become block-level elements;

2, the parent element is set to relative positioning, the child element is set to absolute positioning, and the child elements are set as follows to achieve different effects:

A, bottom:100%-----------------> The bottom of the child element and the top of the parent element are coincident (as shown: black box is parent element ~ White Circle is child element ~)

HTML code:

<id= "Father">    <id= "Child"  >    </div></div> 

CSS code:

<style> #father{background:#000;width:300px;Height:200px;position:relative;Top:300px;//In order for the parent to not rely on the upper left of the screen and slightly set:600px; }#child{background:#fff;width:100px;Height:100px;-webkit-border-radius:50%;-moz-border-radius:50%;Border-radius:50%;position:Absolute;Bottom:100%; }</style>

B, top:100%--------> The bottom of the parent element is aligned (that is, the child element moves down the parent element's height relative to the parent element)

The HTML code is as shown above, and the CSS code is as follows:

<style> #father{background:#000;width:300px;Height:200px;position:relative;Top:300px; Left:600px; }#child{background:#fff;width:100px;Height:100px;-webkit-border-radius:50%;-moz-border-radius:50%;Border-radius:50%;position:Absolute;Top:100%; }</style>

C, as for bottom:0% and top:0%, and so on.

bottom:0% the child element pushes up 0% of the parent element's height at the base of the parent element

top:0% the child element pushes down 0% of the height of the parent element at the top of the parent element

Based on transform and transition to realize the idea of animation effect summary:

The HTML code is as follows:

   <ul>        <Li>            <ahref="#"class= "ToolTip tooltip-effect-5"> Contact<spanclass= "Tooltip-content">                    <Iclass= "fa fa-envelope fa-fw"></I>                </span>            </a>        </Li>    </ul>

In general, we animate elements that have event triggers ~ such as when the initial element is a state ~ and then the mouse moves to the top to start the animation ~ Then there are:

1. Set the display effect at the beginning of the element:

CSS code (written in less)

. tooltip-effect-5. Tooltip-content{//Defines the initial style of the span of the. Tooltip-effect-5 class-webkit-transform:scale3d (0, 0, 0);-moz-transform:scale3d (0, 0, 0);-ms-transform:scale3d (0, 0, 0);-o-transform:scale3d (0, 0, 0);Transform:scale3d (0, 0, 0);-webkit-transform-origin:Center Bottom;-moz-transform-origin:Center Bottom;-ms-transform-origin:Center Bottom;-o-transform-origin:Center Bottom;Transform-origin:Center Bottom;-webkit-transition:All 0.3s;-moz-transition:All 0.3s;-ms-transition:All 0.3s;-o-transition:All 0.3s;transition:All 0.3s;I {-webkit-transform:translate3d (0, 20px, 0);-moz-transform:translate3d (0, 20px, 0);-ms-transform:translate3d (0, 20px, 0);-o-transform:translate3d (0, 20px, 0);Transform:translate3d (0, 20px, 0);-webkit-transition:All 0.3s;-moz-transition:All 0.3s;-ms-transition:All 0.3s;-o-transition:All 0.3s;transition:All 0.3s;Opacity:0; }}

2. Define the style when the mouse hover:

CSS code (written in less)

. Tooltip:hover. tooltip-content,.tooltip:hover. Tooltip-content I{Opacity:1;//Define the final display of bubbles ~ Slide on x, y, z to 0, rotate on x, y, Z to 0 degrees, and scale to 1-webkit-transform on X, y, z:translate3d (0, 0, 0) rotate3d (1, 1, 1, 0) Scale3d (1, 1, 1);-moz-transform:translate3d (0, 0, 0) rotate3d (1, 1, 1, 0) Scale3d (1, 1, 1);-ms-transform:translate3d (0, 0, 0) rotate3d (1, 1, 1, 0) Scale3d (1, 1, 1);-o-transform:translate3d (0, 0, 0) rotate3d (1, 1, 1, 0) Scale3d (1, 1, 1);Transform:translate3d (0, 0, 0) rotate3d (1, 1, 1, 0) Scale3d (1, 1, 1);}

3, so defined in the notice at the beginning of the set element display effect when we also wrote Transition:all 0.3s; The statement ~ Here writes all~ that when the mouse hover ~ The program automatically detects all the attributes that have changed-and makes a transition display by the defined time (0.3s) ~ So the animation is realized ~ Of course we can also manually add the properties that want to change the transition ~ For example, change all of the above to opacity~ that only opacity (transparency) will occur a transition change from 0 to 1 ~ Transition time is 0.3s.

Also summarize the meaning of the content behind transform:

1, Translate3d ()-------set the distance in pixels to translate on X, Y, Z

Note: Although the transformations on the three axes can also be set by using Translatex,translatey,translatez, it is recommended to use translate3d~ so that it is not only convenient to set up the transformation on the three axes ~ but also on the handheld device will turn on acceleration

2, Rotate3d (1,1,1,45deg)--------Set the angle of rotation on X, y, Z ~ The value of the first three parameters is 0~1 ~ The last parameter specifies the degree of rotation ~ that the first three parameters can be interpreted as a percentage of the rotation of the specified number of degrees

3, Scale3d (1,1,1)-----------Set the scaling ratio of x, Y, Z to the value of three parameters is also 0~1

Source Address: Https://github.com/x-shadow-x/toolTip

Online preview: http://x-shadow-x.github.io/toolTip/

The implementation of the ToolTip animation effect of CSS3---transform&transition