bounce css,Bounce Out

Bounce Out

描述 (Description)

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

语法 (Syntax)@keyframes bounceOut {

0% {

transform: scale(1);

}

25% {

transform: scale(.95);

}

50% {

opacity: 1;

transform: scale(1.1);

}

100% {

opacity: 0;

transform: scale(.3);

}

}

参数 (Parameters)Transform - 变换适用于元素的二维和三维变换。

Opacity - 不透明度适用于要进行半透明的元素。

例子 (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: 10s;

animation-duration: 10s;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

@-webkit-keyframes bounceOut {

0% {

-webkit-transform: scale(1);

}

25% {

-webkit-transform: scale(.95);

}

50% {

opacity: 1;

-webkit-transform: scale(1.1);

}

100% {

opacity: 0;

-webkit-transform: scale(.3);

}

}

@keyframes bounceOut {

0% {

transform: scale(1);

}

25% {

transform: scale(.95);

}

50% {

opacity: 1;

transform: scale(1.1);

}

100% {

opacity: 0;

transform: scale(.3);

}

}

.bounceOut {

-webkit-animation-name: bounceOut;

animation-name: bounceOut;

}

Reload page

function myFunction() {

location.reload();

}

输出 (Output)

它会产生以下结果 -

新页面打开