[CSS3] Fun animated box and css3 Animation

[CSS3] Fun animated box and css3 Animation
Html code

1. <Div class = "box"> animation selection box </div>

 

Css code

1. . Box {
2. Width: 300px;
3. Height: 100px;
4. Border: 1px dotted # fff;
5. Border-image: url (data: image/gif; base64, R0lGODlhCAAIAJEAAP // 8A/wAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh + signature + Signature =) 1 repeat;
6. }

Example:
Http://codepen.io/puterjam/pen/gGLBj

CSS3 for animation problems, after the animation is stopped, make his display equal to none, and then let him equal to block, there will be repeated animation Problems

JQuery can be implemented as follows:
1. fadeIn (speed, [callback]) fades in by changing the opacity of all matching elements, and is completed after an animation can trigger a callback function. This animation only adjusts the opacity of the element, that is, the height and width of all matching elements do not change.

Parameter speed (string, number): one of three predefined speed strings ("slow", "normal", or "fast") Long millisecond values (for example, 1000) that represent an animation or

Callback (function): (optional) for example, 600 milliseconds slow fade

Code: $ ("P") fade in ("slow");

A section that quickly fades in 200 milliseconds will pop up a dialog box with jQuery code :. "Animation completed" $ ("P") fade in ("fast", function (){

Alert ();

});

2. fadeOut (speed, [callback]) enables all elements matching the fade-in and fade-out effect by changing the opacity, and triggers a callback function after the animation is complete. This animation only adjusts the opacity of the element, that is, the height and width of all matching elements do not change.

Parameter speed (string, number): one of three predefined speed strings ("slow", "normal", or "fast") Long millisecond values (for example, 1000) that represent an animation or

Callback (function): (optional) features such as slow fading with section 600 milliseconds

Code: $ ("P "). Fade out ("slow ");

200 ms Dialog

The code quickly fades. $ ("P") fade out ("fast", function (){

Alert ("animation complete .");

});

3. fadeTo (speed, transparency, [callback]), all matching elements are gradually adjusted to the specified opacity, and an optional callback function is triggered to complete the opacity after the animation is completed. This animation only adjusts the opacity of the element, that is, the height and width of all matching elements do not change.

Parameter speed (string, number): indicates an animation or

Opacity (one of the three millisecond values of the predefined speed String Length (1000 cases) ("slow", "normal", or "fast"): Adjust 0 and 1) the number of opacity values between callback (function. (Optional) the function is 600 milliseconds and is slowly adjusted to 0.66 segments, with visibility related

Code 2/3. $ ("P") fadeTo ("slow", 0.66); $ ("P "). FadeTo ("slow", 0.66 );

The same version can be quickly adjusted to 200 in 0.25 milliseconds, and the transparency of the visibility is about 1/4. Then a dialog box is displayed, jQuery code: $ ("P "). FadeTo ("fast", 0.25, function (){

Alert () "animation complete .";
});

Click to play the css3 animation.

Attribute control:
Animation-iteration-count: the number of times the animation is played. Unlike transition, you can set the number of cycles for animation. If you want to set an infinite loop, you can set infinite. Hope to help you!