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

This article mainly shows you "how to use css to achieve timing function", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use css to achieve timing function" this article.

Time Demo

Html, body {

Height: 100%

}

Body {

Font-family: "Microsoft Yahei"

Font-size: 18px

Margin: 0

Padding: 0

}

. site-wrapper {

Display: table

Width: 100%

Height: 100%

Min-height: 100%

}

.site-wrapper-inner {

Vertical-align: middle

Display: table-cell

}

.site-wrapper-content {

Width: 240px

Margin: 0 auto

Text-align: center

}

.time {

Margin: 10px 0 0 80px

Padding: 0

List-style: none

}

.time: after {

Content: ""

Display: block

Height: 0

Clear: both

Visibility: hidden

}

.time > li {

Text-align: center

Float: left

Position: relative

Overflow: hidden

Width: 10px

Height: 20px

Line-height: 20px

}

.time > li > div {

Position: absolute

Line-height: 20px

}

@ keyframes step6 {

From {

Top: 0

}

To {

Top:-120px

}

}

@-moz-keyframes step6 / * Firefox * /

{

From {

Top: 0

}

To {

Top:-120px

}

}

@-webkit-keyframes step6 / * Safari and Chrome * /

{

From {

Top: 0

}

To {

Top:-120px

}

}

@-o-keyframes step6 / * Opera * /

{

From {

Top: 0

}

To {

Top:-120px

}

}

@ keyframes step10 {

From {

Top: 0

}

To {

Top:-200px

}

}

@-moz-keyframes step10 / * Firefox * /

{

From {

Top: 0

}

To {

Top:-200px

}

}

@-webkit-keyframes step10 / * Safari and Chrome * /

{

From {

Top: 0

}

To {

Top:-200px

}

}

@-o-keyframes step10 / * Opera * /

{

From {

Top: 0

}

To {

Top:-200px

}

}

.min1 {

Animation: step6 steps (6) 3600s infinite

-moz-animation: step6 steps (6) 3600s infinite; / * Firefox * /

-webkit-animation: step6 steps (6) 3600s infinite; / * Safari and Chrome * /

-o-animation: step6 steps (6) 3600s infinite; / * Opera * /

}

.min2 {

Animation: step10 steps (10) 600s infinite

-moz-animation: step10 steps (10) 600s infinite; / * Firefox * /

-webkit-animation: step10 steps (10) 600s infinite; / * Safari and Chrome * /

-o-animation: step10 steps (10) 600s infinite; / * Opera * /

}

.sec1 {

Animation: step6 steps (6) 60s infinite

-moz-animation: step6 steps (6) 60s infinite; / * Firefox * /

-webkit-animation: step6 steps (6) 60s infinite; / * Safari and Chrome * /

-o-animation: step6 steps (6) 60s infinite; / * Opera * /

}

.sec2 {

Animation: step10 steps (10) 10s infinite

-moz-animation: step10 steps (10) 10s infinite; / * Firefox * /

-webkit-animation: step10 steps (10) 10s infinite; / * Safari and Chrome * /

-o-animation: step10 steps (10) 10s infinite; / * Opera * /

}

.mil1 {

Animation: step10 steps (10) 1s infinite

-moz-animation: step10 steps (10) 1s infinite; / * Firefox * /

-webkit-animation: step10 steps (10) 1s infinite; / * Safari and Chrome * /

-o-animation: step10 steps (10) 1s infinite; / * Opera * /

}

.mil2 {

Animation: step10 steps (10) 0.1s infinite

-moz-animation: step10 steps (10) 0.1s infinite; / * Firefox * /

-webkit-animation: step10 steps (10) 0.1s infinite; / * Safari and Chrome * /

-o-animation: step10 steps (10) 0.1s infinite; / * Opera * /

}

.mil3 {

Animation: step10 steps (10) 0.01s infinite

-moz-animation: step10 steps (10) 0.01s infinite; / * Firefox * /

-webkit-animation: step10 steps (10) 0.01s infinite; / * Safari and Chrome * /

-o-animation: step10 steps (10) 0.01s infinite; / * Opera * /

}

.min1, .min2, .sec1, .sec2, .mil1, .mil2, .mil3 {

Animation-play-state: paused

-moz-animation-play-state: paused; / * Firefox * /

-webkit-animation-play-state: paused; / * Safari and Chrome * /

-o-animation-play-state: paused; / * Opera * /

}

# start:checked ~ .time .min1

# start:checked ~ .time .min2

# start:checked ~ .time .sec1

# start:checked ~ .time .sec2

# start:checked ~ .time .mil1

# start:checked ~ .time .mil2

# start:checked ~ .time .mil3 {

Animation-play-state: running

-moz-animation-play-state: running; / * Firefox * /

-webkit-animation-play-state: running; / * Safari and Chrome * /

-o-animation-play-state: running; / * Opera * /

}

# stop:checked ~ .time .min1

# stop:checked ~ .time .min2

# stop:checked ~ .time .sec1

# stop:checked ~ .time .sec2

# stop:checked ~ .time .mil1

# stop:checked ~ .time .mil2

# stop:checked ~ .time .mil3 {

Animation-play-state: paused

-moz-animation-play-state: paused; / * Firefox * /

-webkit-animation-play-state: paused; / * Safari and Chrome * /

-o-animation-play-state: paused; / * Opera * /

}

# reset:checked ~ .time .min1

# reset:checked ~ .time .min2

# reset:checked ~ .time .sec1

# reset:checked ~ .time .sec2

# reset:checked ~ .time .mil1

# reset:checked ~ .time .mil2

# reset:checked ~ .time .mil3 {

Animation: none

-moz-animation: none; / * Firefox * /

-webkit-animation: none; / * Safari and Chrome * /

-o-animation: none; / * Opera * /

Top: 0

}

Start

Stop

Reset

0 1 2 3 4 5

0 1 2 3 4 5 6 7 8 9

:

0 1 2 3 4 5

0 1 2 3 4 5 6 7 8 9

.

0 1 2 3 4 5 6 7 8 9

0 1 2 3 4 5 6 7 8 9

0 1 2 3 4 5 6 7 8 9

The above is all the contents of the article "how to use css to achieve timing function". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.