728x90
codepen으로 만들어봤어요 !
See the Pen Untitled by getgrovy (@getgrovy) on CodePen.
bounce애니매이션을 css로 만들었어요 !
<head>
<style>
.shadow{
width:60px;
height:4px;
background-color:rgba(0,0,0,.1);
border-radius:3px;
animation:shadow 5s ease-in-out infinite;
margin:auto;
position:absolute;
bottom:-4px;
left:0;
right:0;
}
@keyframes shadow{
0%{
width:60px;
}
10%{
width:10px;
}
20%{
width:60px;
}
30%{
width:10px;
}
40%{
width:60px;
}
50%{
width:10px;
}
60%{
width:60px;
}
70%{
width:10px;
}
92%{
width:10px;
}
100%{
width:60px;
}
}
.container{
width:60px;
height:250px;
position:Relative;
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
/*
transform:translate() translate (x, y)
함수는 요소를 왼쪽에서부터 x거리(距離),
위에서부터 x 거리만큼 상대적으로 위치를 정하거나,
이동 및 재배치를 지정합니다.
Y 방향의 거리는 생략할 수 있지만,
이 경우의 Y방향의 거리는 "0"이 됩니다.
*/
.circle{
width:55px;
height:55px;
border:2px solid #2ecc71;
background-color:#FFFFFF;
border-radius:50%;
position:absolute;
bottom:0;
animation: circle 5s ease-in-out infinite;
opacity:0;
}
/* 진행되는 동안의 속도에 관한 설정 기본값 ease
ease-in-out: 빠르게 시작되어 평균속도 유지 (속도차이큼)
ease : 천천히 시작되고 속도가 줄어들면서 끝난다(속도차이 매우 미세)
ease-in : 천천히 시작
ease-out : 빠르게 시작
linear : 일정한 속도로 진행
step-start : 시작하자마자 순간적으로 바뀜 (아래에서는 시작과 끝이 같아서 확인불가)
step-end : 시작 유지되다가 끝날때 순간적으로 바뀜.(아래에서는 시작과 끝이 같아서 확인불가)
steps(5, end or start) : 5번으로 나누어 끊어지듯 진행됨 예) 10초동안 진행되는 애니메이션이라면
steps(5,end) 일 경우 -> 2,4,6,8초에 순간적으로 변화
steps(5,start) 일 경우 -> 0, 2,4,6,8초에 순간적으로 변화
*/
@keyframes circle{
0%{
transform:translateY(0);
opacity:1;
}
10%{
transform:translateY(-190px);
}
20%{
transform:translateY(0) scaleY(1.2);opacity:1;
/* scaleY 살짝 늘어나게 */
}
20.1%{
opacity:0;
}
100%{
opacity:0;
}
}
.square{
width:55px;
height:55px;
border:2px solid #f1c40f;
background-color:#FFFFFF;
position:absolute;
bottom:0;
opacity:0;
/* 보이지안게 */
animation: square 5s ease-in-out infinite;
}
@keyframes square{
0%{
transform:translateY(0);opacity:0;
}
19%{
transform:translateY(0);opacity:0;
}
20%{
opacity:1;
}
30%{
transform:translateY(-190px) rotate(90deg);
} /*rotate 회전*/
40%{
transform:translateY(0) rotate(180deg);opacity:1;
}
40.1%{
transform:translateY(0);opacity:0;
}
100%{opacity:0;}
}
.triangle{
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
/* transparent << 투명효과 삼각형만들기 */
border-bottom:50px solid #9b59b6;
/* border-top:50px solid #92b659;
border-left:30px solid #b69659;
border-right:30px solid #59b665; */
position:absolute;
bottom:0;
animation: triangle 5s ease-in-out infinite;
opacity:0;
}
.triangle::after{
content:"";
width:0;
height:0;
border-left:26px solid transparent;
border-right:26px solid transparent;
border-bottom:44px solid white;
position:absolute;
bottom:-48px;
left:-26px;
}
@keyframes triangle{
0%{
transform:translateY(0);opacity:0;
}
39%{
transform:translateY(0);opacity:0;
}
40%{
opacity:1;
}
50%{
transform:translateY(-190px) rotate(60deg);
}
60%{
transform:translateY(0) rotate(120deg);opacity:1;
}
60.1%{
transform:translateY(0);opacity:0;
}
100%{opacity:0;}
}
.logo{
position:absolute;
bottom:0;
text-align:center;
color:#3498db;
font-size:25px;
margin-left:-5px;
opacity:0;
animation: logo 5s ease-in-out infinite;
}
@keyframes logo{
0%{
transform:translateY(0);opacity:0;
}
59%{
transform:translateY(0);opacity:0;
}
60%{
opacity:1;
}
70%{
transform:translateY(-95px);
}
92%{
transform:translateY(-95px);
}
100%{
transform:translateY(0);opacity:1;
}
}
</style>
</head>
<div class="container">
<div class="circle"></div>
<div class="square"></div>
<div class="triangle"></div>
<div class="logo">Pixmy</div>
<div class="shadow"></div>
</div>
</html>
point !
...
animation: circle 5s ease-in-out infinite;
}
@keyframes circle{
0%{
}
10%{
통통뛰기
}
20%{
빙글빙글돌기
}
30%{
}
...
100%{
}
}animation 효과에 @keyframes을 줄경우 해당 %마다 모션이 작동해요 !
animation이름이 circle인경우 xx%~xx%까지 는
0%~10%
10%~20% 통통뛰기
20%~20% 빙글빙글 돌기
...
90%~100%
이런식으로 표현하고자 하는 애니메이션을 해당 %에 넣을경우 실행됨 !