Shulou(Shulou.com)06/02 Report--

This article mainly introduces "which CSS animation codes are commonly used in front-end development". In daily operation, I believe that many people have doubts about what problems there are in the front-end development of commonly used CSS animation code. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "front-end development commonly used CSS animation code." Next, please follow the editor to study!

/ * Import head and tail * /

$(document) .ready (function () {

$(".footer") .load ("page/footer.html")

});

However, note that at this time, the footer.html does not need to be a complete HTML (I encountered this big hole at that time, it was full of tears / (tears) / ~ ~), which includes the tag content.

Here the editor has built a front-end learning and exchange QQ group: 132667127, I have sorted out the latest front-end materials and advanced development tutorials, if you want, you can join the group to learn and communicate together.

Home page

classification

Order

Mine

Css animation code commonly used in front-end development

/ * move to the left and display flexibly * /

@-webkit-keyframes fadeToLeftTan {

0% {- webkit-transform:translateX; opacity:0;}

70% {- webkit-transform:translateX (- 5%); opacity:1;}

80% {- webkit-transform:translateX (2%); opacity:1;}

90% {- webkit-transform:translateX (- 2%); opacity:1;}

100% {- webkit-transform:translateX (0); opacity:1;}

}

@ keyframes fadeToLeftTan {

0 {transform:translateX (100%); opacity:0;}

70% {transform:translateX (- 5%); opacity:1;}

80% {transform:translateX (2%); opacity:1;}

90% {transform:translateX (- 2%); opacity:1;}

100% {transform:translateX (0); opacity:1;}

}

/ * move to the right and display flexibly * /

@-webkit-keyframes fadeToRightTan {

0% {- webkit-transform:translateX (- 100%); opacity:0;}

70% {- webkit-transform:translateX (5%); opacity:1;}

80% {- webkit-transform:translateX (- 2%); opacity:1;}

90% {- webkit-transform:translateX (2%); opacity:1;}

100% {- webkit-transform:translateX (0); opacity:1;}

}

@ keyframes fadeToRightTan {

0 {transform:translateX (- 100%); opacity:0;}

70% {transform:translateX (5%); opacity:1;}

80% {transform:translateX (- 2%); opacity:1;}

90% {transform:translateX (2%); opacity:1;}

100% {transform:translateX (0); opacity:1;}

}

/ * move up and display flexibly * /

@-webkit-keyframes fadeToTopTan {

0% {- webkit-transform:translateY; opacity:0;}

70% {- webkit-transform:translateY (- 5%); opacity:1;}

80% {- webkit-transform:translateY (2%); opacity:1;}

90% {- webkit-transform:translateY (- 2%); opacity:1;}

100% {- webkit-transform:translateY (0); opacity:1;}

}

@ keyframes fadeToTopTan {

0 {transform:translateY (100%); opacity:0;}

70% {transform:translateY (- 5%); opacity:1;}

80% {transform:translateY (2%); opacity:1;}

90% {transform:translateY (- 2%); opacity:1;}

100% {transform:translateY (0); opacity:1;}

}

/ * move down and display flexibly * /

@-webkit-keyframes fadeToDownTan {

0% {- webkit-transform:translateY (- 100%); opacity:0;}

70% {- webkit-transform:translateY (5%); opacity:1;}

80% {- webkit-transform:translateY (- 2%); opacity:1;}

90% {- webkit-transform:translateY (2%); opacity:1;}

100% {- webkit-transform:translateY (0); opacity:1;}

}

@ keyframes fadeToDownTan {

0 {transform:translateY (- 100%); opacity:0;}

70% {transform:translateY (5%); opacity:1;}

80% {transform:translateY (- 2%); opacity:1;}

90% {transform:translateY (2%); opacity:1;}

100% {transform:translateY (0); opacity:1;}

}

/ * change the elastic display from large to small * /

@-webkit-keyframes fadeInMaxToMinTan {

0% {- webkit-transform:scale (2); opacity:0;}

70% {- webkit-transform:scale (.9); opacity:1;}

85% {- webkit-transform:scale (1.1); opacity:1;}

100% {- webkit-transform:scale (1); opacity:1;}

}

@ keyframes fadeInMaxToMinTan {

0% {transform:scale (2); opacity:0;}

70% {transform:scale (.9); opacity:1;}

85% {transform:scale (1.1); opacity:1;}

100% {transform:scale (1); opacity:1;}

}

/ * change the elastic display from small to large * /

@-webkit-keyframes fadeInMinToMaxTan {

0% {- webkit-transform:scale (0); opacity:0;}

70% {- webkit-transform:scale (1.1); opacity:1;}

85% {- webkit-transform:scale (.9); opacity:1;}

100% {- webkit-transform:scale (1); opacity:1;}

}

@ keyframes fadeInMinToMaxTan {

0% {transform:scale (0); opacity:0;}

70% {transform:scale (1.1); opacity:1;}

85% {transform:scale (.9); opacity:1;}

100% {transform:scale (1); opacity:1;}

}

/ * /

/ * move to the left to display * /

@-webkit-keyframes fadeToLeft {

0% {- webkit-transform:translateX; opacity:0;}

100% {- webkit-transform:translateX (0); opacity:1;}

}

@ keyframes fadeToLeft {

0 {transform:translateX (100%); opacity:0;}

100% {transform:translateX (0); opacity:1;}

}

/ * move to the right to display * /

@-webkit-keyframes fadeToRight {

0% {- webkit-transform:translateX (- 100%); opacity:0;}

100% {- webkit-transform:translateX (0); opacity:1;}

}

@ keyframes fadeToRight {

0 {transform:translateX (- 100%); opacity:0;}

100% {transform:translateX (0); opacity:1;}

}

/ * move the display up * /

@-webkit-keyframes fadeToTop {

0% {- webkit-transform:translateY; opacity:0;}

100% {- webkit-transform:translateY (0); opacity:1;}

}

@ keyframes fadeToTop {

0 {transform:translateY (100%); opacity:0;}

100% {transform:translateY (0); opacity:1;}

}

/ * move the display up 60 * /

@-webkit-keyframes fadeToTop60 {

0% {- webkit-transform:translateY (60px); opacity:0;}

100% {- webkit-transform:translateY (0); opacity:1;}

}

@ keyframes fadeToTop60 {

0% {transform:translateY (60px); opacity:0;}

100% {transform:translateY (0); opacity:1;}

}

/ * move the display down * /

@-webkit-keyframes fadeToDown {

0% {- webkit-transform:translateY (- 100%); opacity:0;}

100% {- webkit-transform:translateY (0); opacity:1;}

}

@ keyframes fadeToDown {

0 {transform:translateY (- 100%); opacity:0;}

100% {transform:translateY (0); opacity:1;}

}

/ * move the display down 60 * /

@-webkit-keyframes fadeToDown60 {

0% {- webkit-transform:translateY (- 60px); opacity:0;}

100% {- webkit-transform:translateY (0); opacity:1;}

}

@ keyframes fadeToDown60 {

0% {transform:translateY (- 60px); opacity:0;}

100% {transform:translateY (0); opacity:1;}

}

/ * /

/ * float up and down slightly * /

@-webkit-keyframes flashTopDown {

0% {- webkit-transform:translateY (0); opacity:1;}

100% {- webkit-transform:translateY (8px); opacity:.8;}

}

@ keyframes flashTopDown {

0% {transform:translateY (0); opacity:1;}

100% {transform:translateY (8px); opacity:.8;}

}

/ * /

/ * display from large to small * /

@-webkit-keyframes fadeInMaxToMin {

0% {- webkit-transform:scale (2); opacity:0;}

100% {- webkit-transform:scale (1); opacity:1;}

}

@ keyframes fadeInMaxToMin {

0% {transform:scale (2); opacity:0;}

100% {transform:scale (1); opacity:1;}

}

/ * display from small to large * /

@-webkit-keyframes fadeInMinToMax {

0% {- webkit-transform:scale (0); opacity:0;}

100% {- webkit-transform:scale (1); opacity:1;}

}

@ keyframes fadeInMinToMax {

0% {transform:scale (0); opacity:0;}

100% {transform:scale (1); opacity:1;}

}

/ * /

/ * the size flicker becomes smaller * /

@-webkit-keyframes flashMaxMin {

0% {- webkit-transform:scale (1);}

100% {- webkit-transform:scale (.98);}

}

@ keyframes flashMaxMin {

0% {transform:scale (1);}

{transform:scale (.98);}

}

/ * size flashing changes become larger * /

@-webkit-keyframes flashMax {

0% {- webkit-transform:scale (1);}

100% {- webkit-transform:scale (1.05);}

}

@ keyframes flashMax {

0% {transform:scale (1);}

100% {transform:scale (1.05);}

}

/ * /

/ * emerging * /

@-webkit-keyframes fadeIn {

0% {opacity:0;}

100% {opacity:1;}

}

@ keyframes fadeIn {

0% {opacity:0;}

100% {opacity:1;}

}

/ * fade * /

@-webkit-keyframes fadeOut {

0% {opacity:1;}

100% {opacity:0;}

}

@ keyframes fadeOut {

0% {opacity:1;}

100% {opacity:0;}

}

Front-end development, mobile common style

/ * disable automatic font size adjustment of Safari in iPhone * /

Html {

-webkit-text-size-adjust: 100%

-ms-text-size-adjust: 100%

/ * fixed the situation that the default sliding of IOS is very stuck * /

-webkit-overflow-scrolling: touch

}

/ * suppress zooming of the form * /

Input [type= "submit"], input [type= "reset"], input [type= "button"], input {

Resize: none

Border: none

}

/ * Unhighlight the link * /

Body, div, ul, li, ol, h2, h3, h4, h5, h6, h7, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

-webkit-tap-highlight-color: rgba (0,0,0,0)

}

/ * set the HTML5 element to block * /

Article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

Display: block

}

/ * Image adaptation * /

Img {

Width: 100%

Height: auto

Width: auto9; / * ie8 * /

Display: block

-ms-interpolation-mode: bicubic;/* to take care of ie image scaling distortion * /

}

/ * initialize * /

Body, div, ul, li, ol, h2, h3, h4, h5, h6, h7, input, textarea, select, p, dl, dt, dd, a, img, button

Form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup

Menu, nav, section {

Margin: 0

Padding: 0

}

Body {

Font: 12px/1.5 'Microsoft YaHei',' Arial', Tahoma, Arial, sans-serif

Color: # fff

Background-color: # F7F7F7

}

Em, i {

Font-style: normal

}

Ul,li {

List-style-type: none

}

Strong {

Font-weight: normal

}

Table {

Border-collapse:collapse

Border-spacing:0

}

Textarea {

Resize:none; / * disables text dragging, especially under Google * /

}

P {

Word-wrap:break-word; / * words that are insufficient are automatically wrapped without being truncated * /

}

.clearfix: after {

Content: ""

Display: block

Visibility: hidden

Height: 0

Clear: both

}

.clearfix {

Zoom: 1

}

A {

Text-decoration: none

Color: # fff

Font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif

}

A:hover {

Text-decoration: none

}

Ul, ol {

List-style: none

}

H2, h3, h4, h5, h6, h7 {

Font-size: 100%

Font-family: 'Microsoft YaHei'

}

Img {

Border: none

}

Input {

Font-family: 'Microsoft YaHei'

}

/ * single-line overflow * /

.one-txt-cut {

Overflow: hidden

White-space: nowrap

Text-overflow: ellipsis

}

/ * Multi-line overflow for mobile use * /

. txt-cut {

Overflow: hidden

Text-overflow: ellipsis

Display:-webkit-box

/ *-webkit-line-clamp: 2; * /

-webkit-box-orient: vertical

}

/ * the mobile terminal clicks the a link to solve the problem of blue background * /

A:link,a:active,a:visited,a:hover {

Background: none

-webkit-tap-highlight-color: rgba (0pc0pl 0p0pl 0)

-webkit-tap-highlight-color: transparent

}

.overflow {overflow:hidden;}

.w50 {

Width: 50%

}

.w25 {

Width: 25%

}

.w20 {

Width: 20%

}

.w33 {

Width: 33.333333%

}

.fl {

Float: left

}

.fr {

Float: right

}

.db {

Display: block! important

}

.dn {

Display: none

}

/ * additional * / at this point, the study on "what are the common CSS animation codes used in front-end development" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.