<body>
<div class="circle">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="big">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="tri"></div>
<div class="squ">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="end">
<div>E</div>
<div>N</div>
<div>D</div>
</div>
</body>
@charset "UTF-8";
/*********** reset **********/
html,
body,
div {
margin:0;
padding:0;
border:0;
}
/* ------------------------------------------------------ */
html,
body {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
/* -----------------------
animation circle 回る玉 ~4s
----------------------- */
.circle {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #3a6e9a;
}
.circle div {
position: absolute;
top: calc((50% - 10px));
left: calc((50% - 10px));
width: 20px;
height:20px;
background: #fff;
border-radius: 50%;
}
.circle div:nth-child(1) { animation: anim_01 2s forwards;}
.circle div:nth-child(2) { animation: move_01 2s 2s; }
.circle div:nth-child(4) { animation: move_03 2s 2s; }
.circle div:nth-child(3) { animation: move_02 2s 2s; }
.circle div:nth-child(5) { animation: move_04 2s 2s; }
@keyframes anim_01 {
0% { transform: scale(0);}
20% { transform: scale(3);}
50% { transform: scale(1);}
90% { transform: scale(5);}
100% { transform: scale(0);}
}
@keyframes move_01 {
0% { transform: translate(0) scale(0);}
20% { transform: translate(-100px, -100px) scale(1);}
40% { transform: translate(-100px, 100px) scale(1);}
60% { transform: translate(100px, 100px) scale(1);}
80% { transform: translate(100px, -100px) scale(1);}
100% { transform: translate(0) scale(1);}
}
@keyframes move_02 {
0% { transform: translate(0) scale(0);}
20% { transform: translate(-100px, 100px) scale(1);}
40% { transform: translate(100px, 100px) scale(1);}
60% { transform: translate(100px, -100px) scale(1);}
80% { transform: translate(-100px, -100px) scale(1);}
100% { transform: translate(0) scale(1);}
}
@keyframes move_03 {
0% { transform: translate(0px) scale(0);}
20% { transform: translate(100px, 100px) scale(1);}
40% { transform: translate(100px, -100px) scale(1);}
60% { transform: translate(-100px, -100px) scale(1);}
80% { transform: translate(-100px, 100px) scale(1);}
100% { transform: translate(0) scale(1);}
}
@keyframes move_04 {
0% { transform: translate(0px) scale(0);}
20% { transform: translate(100px, -100px) scale(1);}
40% { transform: translate(-100px, -100px) scale(1);}
60% { transform: translate(-100px, 100px) scale(1);}
80% { transform: translate(100px, 100px) scale(1);}
100% { transform: translate(0) scale(1);}
}
/* -----------------------
animation big 広がる玉 4s~5.6s
----------------------- */
.big {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.big div{
position: absolute;
top: calc((50% - 1500px));
left: calc((50% - 1500px));
width: 3000px;
height: 3000px;
border-radius: 50%;
transform: scale(0);
}
.big div:nth-child(1) { background: #fffcee; animation: big .5s 4s forwards;}
.big div:nth-child(2) { background: #bd8e99; animation: big .5s 4.5s forwards;}
.big div:nth-child(3) { background: #9e3f57; animation: big .5s 5s forwards;}
@keyframes big {
0% { transform: scale(0);}
100% {transform: scale(1);}
}
/* -----------------------
animation tri 突き上げる三角 ~5.9s
----------------------- */
.tri {
position: absolute;
bottom: -300vw;
left: -100vw;
width: 0;
height: 0;
border-left: 150vw solid rgba(255, 0, 0, 0);
border-right: 150vw solid rgba(255, 0, 0, 0);
border-bottom: 300vw solid rgb(255, 251, 189);
animation: tri .6s 5.3s linear forwards;
}
@keyframes tri {
100% {transform: translateY(-300vw); }
}
/* -----------------------
animation squ 現れる四角 7.3s
----------------------- */
.squ {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.squ div {
position: absolute;
top: calc((50% - 50px));
left: calc((50% - 50px));
width: 100px;
height:100px;
background: #3a6e9a;
border-radius: 50%;
transform: scale(0);
}
.squ div:nth-child(1) { animation: squ .6s 5.8s cubic-bezier(0, 0.73, 0.54, 2.4) forwards;}
.squ div:nth-child(2) { animation: moveSqu_01 .8s 6.5s forwards;}
.squ div:nth-child(3) { animation: moveSqu_02 .8s 6.5s forwards;}
.squ div:nth-child(4) { animation: moveSqu_03 .8s 6.5s forwards;}
@keyframes squ {
0% { transform: translateY(100px) scale(0);}
20% { transform: translateY(100px) scale(1);}
99% { transform: translateY(0) scale(1);}
100% { transform: translateY(0) scale(0);}
}
@keyframes moveSqu_01 {
0% { transform: translateX(0);}
100% { transform: translateX(-300px); border-radius: 0;}
}
@keyframes moveSqu_02 {
0% { transform: translateX(0);}
100% { transform: translateX(0px); border-radius: 0;}
}
@keyframes moveSqu_03 {
0% { transform: translateX(0);}
100% { transform: translateX(300px); border-radius: 0;}
}
/* -----------------------
animation end
----------------------- */
.end {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.end div {
position: absolute;
top: calc((50% - 50px));
left: calc((50% - 50px));
width: 100px;
height:100px;
font-size: 70px;
color: #fff;
line-height: 100px;
text-align: center;
opacity: 0;
animation: end 1s 7.4s forwards;
}
.end div:nth-child(1) {
transform: translateX(-300px);
}
.end div:nth-child(3) {
transform: translateX(300px);
}
@keyframes end {
100% { opacity: 1;}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.