html跳转 effect,css摆动效果(css wiggle effect)

.animated {

background-image: url(/css/images/logo.png);

background-repeat: no-repeat;

background-position: left top;

padding-top:95px;

margin-bottom:60px;

-webkit-animation-duration: 10s;

animation-duration: 10s;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

@-webkit-keyframes wiggle {

0% { -webkit-transform: skewX(9deg); }

10% { -webkit-transform: skewX(-8deg); }

20% { -webkit-transform: skewX(7deg); }

30% { -webkit-transform: skewX(-6deg); }

40% { -webkit-transform: skewX(5deg); }

50% { -webkit-transform: skewX(-4deg); }

60% { -webkit-transform: skewX(3deg); }

70% { -webkit-transform: skewX(-2deg); }

80% { -webkit-transform: skewX(1deg); }

90% { -webkit-transform: skewX(0deg); }

100% { -webkit-transform: skewX(0deg); }

}

@keyframes wiggle {

0% { transform: skewX(9deg); }

10% { transform: skewX(-8deg); }

20% { transform: skewX(7deg); }

30% { transform: skewX(-6deg); }

40% { transform: skewX(5deg); }

50% { transform: skewX(-4deg); }

60% { transform: skewX(3deg); }

70% { transform: skewX(-2deg); }

80% { transform: skewX(1deg); }

90% { transform: skewX(0deg); }

100% { transform: skewX(0deg); }

}

.wiggle {

-webkit-animation-name: wiggle;

animation-name: wiggle;

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

.animated.wiggle {

-webkit-animation-duration: 0.75s;

animation-duration: 0.75s;

}

Reload page

function myFunction() {

location.reload();

}