html5 倒计时跳转动画,HTML5弹性摇摆旋转的倒计时动画

CSS

语言：

CSSSCSS

确定

body {

background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);

font-family: 'Roboto', sans-serif;

margin: 0;

height: 100vh;

}

.counter {

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

text-align: center;

}

.counter.hide {

transform: translate(-50%, -50%) scale(0);

animation: hide .2s ease-out;

}

@keyframes hide {

0% {

transform: translate(-50%, -50%) scale(1);

}

100% {

transform: translate(-50%, -50%) scale(0);

}

}

.final {

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%) scale(0);

}

.final.show {

transform: translate(-50%, -50%) scale(1);

animation: show .3s ease-in;

}

@keyframes show {

0% {

transform: translate(-50%, -50%) scale(0);

}

80% {

transform: translate(-50%, -50%) scale(1.4);

}

100% {

transform: translate(-50%, -50%) scale(1);

}

}

.nums {

color: #3498db;

position: relative;

font-size: 50px;

overflow: hidden;

width: 250px;

height: 50px;

}

.nums span {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%) rotate(120deg);

transform-origin: bottom center;

}

.nums span.in {

transform: translate(-50%, -50%) rotate(0deg);

animation: goIn .5s ease-in-out;

}

.nums span.out {

animation: goOut .5s ease-in-out;

}

@keyframes goIn {

0% {

transform: translate(-50%, -50%) rotate(120deg);

}

30% {

transform: translate(-50%, -50%) rotate(-20deg);

}

60% {

transform: translate(-50%, -50%) rotate(10deg);

}

90%,

100% {

transform: translate(-50%, -50%) rotate(0deg);

}

}

@keyframes goOut {

0%, 30% {

transform: translate(-50%, -50%) rotate(0deg);

}

60% {

transform: translate(-50%, -50%) rotate(20deg);

}

100% {

transform: translate(-50%, -50%) rotate(-120deg);

}

}

h4 {

font-size: 20px;

margin: 5px;

text-transform: uppercase;

}

footer {

position: fixed;

bottom: 0;

left: 0;

right: 0;

text-align: center;

letter-spacing: 1px;

}

footer i {

color: red;

}

footer a {

color: #3C97BF;

text-decoration: none;

}