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)

它会产生以下结果 -

新页面打开

bounce css,Bounce Out相关推荐

bounce css,Bounce
Bounce 描述 (Description) 弹跳动画效果用于在击中后快速向上,向后或远离表面移动元素. 语法 (Syntax)@keyframes bounce { 0%, 20%, 50%, 8 ...
关键帧动画html例子,Bounce.js 是一个漂亮的CSS3关键帧动画生成工具和类库_前端开发者...
Bounce. bouncejs.com提供的工具支持生成静态关键帧, 不需要使用额外JavaScript代码, 如果想在你的应用程序中动态生成这些代码, 可以使用Bounce. 安装可以通过Bowe ...
Bounce 动画的认识
Bounce指的是什么? 弹跳动画效果用于在击中后快速向上,向后或远离表面移动元素. 语法 (Syntax) @keyframes bounce {0%, 20%, 50%, 80%, 100% {t ...
邮件营销之bounce类型
退信(bounce)是指各种原因造成的发件人所发出的信息不能被收件人正常接收的情况.根据邮件被退回的原因,可以分为hard bounce和soft bounce两种不同情况.一般来说,硬退信所造成的退 ...
How to Reduce Ground Bounce: Mitigating Noise with PCB Design Best Practices
原文链接:https://www.allaboutcircuits.com/technical-articles/how-to-reduce-ground-bounce-mitigating-nois ...
Web 开发中 20 个很有用的 CSS 库
在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS 库,框架,应用这样的工具能够为开发者做 ...
CSS3动画效果-animate.css
为什么80%的码农都做不了架构师?>>> animate.css 是提供炫酷,有趣,跨浏览器css3动画的网站,你可以在高级项目中使用这些效果,为高级浏览器用户提供更好的交互体 ...
animate.css源码
animate.css源码 animate.css源码,关于如何使用animate.css,可参考 vue+ts或者react+ts如何使用animate.css. /*!动画属性:animation ...
vue 使用animate.css动画库
vue 2示例 `先下载` `在 main.js中将Animate.css库导入到您的项目中,即在其中添加如下代码`==(切记两个都要引入不然没有效果下面的css是自己封装的动画时间效果之类的)= ...

bounce css,Bounce Out

bounce css,Bounce Out相关推荐

最新文章

热门文章