您的位置：首页 > Web前端 > CSS

纯css做的页面加载之后div回弹动画

2017-10-11 16:33 645 查看

只写了谷歌的样式，

页面一打开，div会延迟加载个小回弹动画。

以前都是用的js写，这次用了css3，感觉挺好的。

以下是简化版demo

<style>

div{
transition: all 5s;

-ms-transition: all 1s; /* Safari 和 Chrome */

-webkit-transition: all 1s; /* Safari 和 Chrome */

behavior: url(/webapps/PIE-css3/PIE.htc);

}

@-webkit-keyframes animateUp {

from, 60%, 75%, 90%, to {

-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

}

from {

opacity: 0;

-webkit-transform: translate3d(0, -3000px, 0);

transform: translate3d(0, -3000px, 0);

}

60% {

opacity: 1;

-webkit-transform: translate3d(0, 28px, 0);

transform: translate3d(0, 28px, 0);

}

75% {

-webkit-transform: translate3d(0, -24px, 0);

transform: translate3d(0, -24px, 0);

}

95% {

-webkit-transform: translate3d(0, 5px, 0);

transform: translate3d(0, 5px, 0);

}

to {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

}

@-webkit-keyframes animateLeft {

from, 60%, 75%, 90%, to {

-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

}

0% {

opacity: 0;

-webkit-transform: translate3d(-3000px, 0, 0);

transform: translate3d(-3000px, 0, 0);

}

60% {

opacity: 1;

-webkit-transform: translate3d(25px, 0, 0);

transform: translate3d(25px, 0, 0);

}

75% {

-webkit-transform: translate3d(-10px, 0, 0);

transform: translate3d(-10px, 0, 0);

}

90% {

-webkit-transform: translate3d(5px, 0, 0);

transform: translate3d(5px, 0, 0);

}

to {

-webkit-transform: none;

transform: none;

}

}

.animateUp {

-webkit-animation-name: animateUp;

animation-name: animateUp;

}

.animation {

-webkit-animation-duration: 1s;

animation-duration: 1s;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

.animateLeft {

-webkit-animation-name: animateLeft;

animation-name: animateLeft;

}

</style>

<body>
<div style="width: 100%;height: 500px; position: relative;">
<div class="animateLeft animation" style="width: 200px;height: 200px; position: absolute;left: 40%;margin-left: -100px;top: 50%;margin-top: -100px; background: blue;"></div>
<div class="animateUp animation" style="width: 200px;height: 200px; position: absolute;left: 60%;margin-left: -100px;top: 50%;margin-top: -100px; background: pink;"></div>
</div>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 h5

相关文章推荐

新的分享

章节导航