h5滚动时侧滑出现_HTML5 页面滚动时文本滑入动画

CSS

语言：

CSSSCSS

确定

* {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

body{margin: 0;}

section {

background: #eee;

padding: 40vh 10%;

overflow: hidden;

}

section p {

color: rgba(0, 0, 0, 0.5) !important;

font-weight: 100;

font-size: 36pt;

}

section.one {

background-color: #ffe62b;

}

section.two {

background-color: #ffcf00;

}

section.three {

background-color: #ffb700;

}

section.four {

background-color: #ff9e00;

}

section.five {

background-color: #ff7a00;

}

.module {

position: relative;

float: left;

margin: 5%;

opacity: 0;

}

.module:nth-child(even) {

margin-right: 0;

}

.come-in {

transform: translateX(-150px);

animation: come-in 0.5s cubic-bezier(0, -0.01, 0, 0.99) forwards;

}

.come-in:nth-child(odd) {

animation-delay: 0.1s;

animation-duration: 0.75s;

}

.leave {

transform: translateX(150px);

animation: leave 0.5s cubic-bezier(0, -0.01, 0, 0.99) forwards;

}

.leave:nth-child(odd) {

animation-delay: 0.1s;

animation-duration: 0.75s;

}

.already-visible {

transform: translateY(0);

animation: none;

opacity: 1;

}

@keyframes come-in {

to {

transform: translateX(0);

opacity: 1;

}

}

@keyframes leave {

to {

transform: translateX(-150);

opacity: 0;

}

}