How to use css to realize timing function
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!
