bounce css,Bounce

Bounce

描述 (Description)

弹跳动画效果用于在击中后快速向上，向后或远离表面移动元素。

语法 (Syntax)@keyframes bounce {

0%, 20%, 50%, 80%, 100% {transform: translateY(0);}

40% {transform: translateY(-30px);}

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

}

参数 (Parameters)

Transform - 变换适用于元素的二维和三维变换。

例子 (Example)

.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: 1s;

animation-duration: 1s;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

@-webkit-keyframes bounce {

0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}

40% {-webkit-transform: translateY(-30px);}

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

}

@keyframes bounce {

0%, 20%, 50%, 80%, 100% {transform: translateY(0);}

40% {transform: translateY(-30px);}

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

}

.bounce {

-webkit-animation-name: bounce;

animation-name: bounce;

}

Reload page

function myFunction() {

location.reload();

}

它会产生以下结果 -

新页面打开