※デベロッパーツール等でソースコードをご確認ください(Please check using Developer tools)
Dummytext01Dummytext01
Dummytext01Dummytext01
body {
background: #ddd;
}
.block {
position: relative;
margin: 70px 0 0;
text-align: center;
font-size: 50px;
}
.block div {
overflow: hidden;
width: 0;
}
.block div p {
width: 100vw;
word-wrap: break-word;
}
.block div:first-child {
color: #fff;
transition: width 1.5s cubic-bezier(0.2, 1, 0.2, 1), opacity 0.5s ease 1.5s;
}
.block div:nth-child(2) {
position: absolute;
left: 0;
top: 0;
transition: width 1.5s cubic-bezier(0.2, 1, 0.2, 1) 0.2s;
}
.block.active div {
width: 100%;
}
.block.active div:first-child {
opacity: 0;
filter: alpha(opacity=0);
}
window.onload = function() {
document.getElementById("block").classList.add("active")
};