카테고리 없음

[CSS] 모던 애니매이션, 트랜지션 예제

Gilvert 2018. 6. 28. 18:00
728x90


# 예제1 :  칼라, 형태 변형, 이동

# 예제2 :   버튼 클릭했을 경우 트랜지션

#예제3 : 랜딩페이지: 텍스트 이동 + 버튼 트랜지션



# 예제1 :  칼라, 형태 변형, 이동




body{
background: #333;
}


.box{

background: white;
width: 200px;
height: 200px;
position: relative;
animation-name: myanimation;
animation-duration: 10s;
animation-iteration-count: infinite;

}

@keyframes myanimation{
0% {background-color:white; left: 0px; top: 0px; border-radius:0 0 0 0;}
25% {background-color: red; left: 300px; top: 0px; border-radius:50% 0 0 0;}
50% {background-color: black; left: 300px; top: 300px; border-radius:50% 50% 0 0;}
70% {background-color: blue; left: 0px; top: 300px; border-radius:50% 50% 50% 0;}
100% {background-color: yellow; left: 0px; top: 0px; border-radius:50% 50% 50% 50%;}

}


# 예제2 :   버튼 클릭했을 경우 트랜지션


body{
background: #333;
}

.box{
background: white;
width: 300px;
height: 300px;
position: relative;
margin: auto;
top: 200px;
/* transition-property: background, border-radius; */

transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in;
}

.box:hover{
background: red;
border-radius: 50%;
transform: rotateY(180deg);
}



#예제3 : 랜딩페이지: 텍스트 이동 + 버튼 트랜지션



*{
margin: 0;
padding: 0;
}

body{
font-family: Arial, Helvetica, sans-serif;
background-color: #12475f;
color: #fff;
line-height: 1.6;
text-align: center;

}


.container{
max-width: 960px;
margin:auto;
padding: 0 30px;
}


#showcase{
height: 300px;
}

#showcase h1{

font-size: 50px;
line-height:1.3;
position: relative;
animation: heading;
animation-duration: 3s;
animation-fill-mode: forwards;
}

@keyframes heading{
0% { top: -50px}
50% {top: 200px}
}


#content{
position: relative;
animation: content;
animation-duration: 3s;
animation-fill-mode: forwards;
}


@keyframes content{
0% { left: -1000px}
50% {left: 0px}
}

.btn{
display: inline-block;
color: #fff;
text-decoration: none;
padding: 1rem 2rem;

border: #fff 1px solid;
margin-top: 40px;
opacity: 0;

animation-name: btn;
animation-duration: 3s;
animation-delay: 1s;
animation-fill-mode: forwards;

transition-property: transform;
transition-duration: 1s;
}

.btn:hover{
transform: rotateY(180deg);
}

@keyframes btn{
0% {opacity: 0}
100% {opacity: 100}
}


가우넷 구름 USB 충전식 양면 대용량 보조배터리 손난로, 단일 상품, 화이트



"파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"