[HTML/CSS] 기본구조/서식

ㅁTransition / Animation

• 웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌는 것

Transform (특정 요소의 크기, 형태, 스타일 변화)

• translate(x,y) : 지정한 크기만큼 x,y축 이동
• scale(x,y) : 지정한 크기만큼 x,y축으로 확대/축소
• rotate(각도) : 지정한 각도만큼 회전
• skew(x,y) ; 지정한 각도만큼 x,y축으로 왜곡

#move:hover{transform:translate(10px,20px);}
#move:hover{transform:translate3d(10px,20px,10px);}
#scale {transform:scale(0.7);}     /*x,y축으로 0.7배 확대*/
#rotate {transform:rotate(45deg);}
#skew {transform:skew(-25deg, -15deg);}
</style>

Transition

• transition-property : 트랜지션 대상 지정
• transition-duration : 트랜지션 실행 시간 지정
• transition-timing-function : 트랜지션 실행 형태 지정
• transition-delay : 트랜지션 지연 시간 지정

• transition : 위 속성 한꺼번에 지정 (property

  duration

  timing-function

  delay)

...
transition-property : width, height;
transirion-duration : 2s, 1s;
.box:hover{
  width : 200px; height : 200px;
}
.box{
  transition-property : 2x ease-in;
/*property : 기본값 all, duration : 2s, timing-function : ease-in(느리게 시작), delay : 기본값 0*/
}
</style>

Animation

• @keyframes : 애니메이션이 바뀌는 지점 지정
• animation-delay : 시작 시간 지정
• animation-direction : 종료한 뒤 처음부터 시작할지, 역방향으로 진행할지
• animation-duration : 실행 시간 지정
• animation-iteration-count : 반복 횟수 지정
• animation-name : @keyframes로 설정해 놓은 중간 상태 지정
• animation-timing-function : 키프레임의 전환 형태 지정
• animation : animation속성 한꺼번에 지정

#box1{
  border : 1px solid transparent;
  animation-name : shape;
  animation-duration : 3s;
  animation-iteration-count :infinite; /*무한반복*/
}
@keyframes shape{
  from{border : 1px solid transparent;} /*1px짜리 투명 테두리에서*/
  to{
    border : 1px solid black;  /*검정 테두리로 변경*/
    border-radius : 50%  /*테두리 둥글게 변경*/
  }
}
</style>

{...
animation : rotate 1.5s infinite, background 1.5s infinite alternate;
}/*rotate애니메이션 정의, 1.5s진행, 무한반복 , background애니메이션 정의, 1.5s진행, 무한반복, 완료 후 역방향 재생*/
@keyframes rotate{  /*0도 -> x축 -180도 회전 -> y축 -180도 회전*/
from{transform : perspective(120px) rotateX(0deg) rotateY(0deg)}
50%{transform : perspective(120px) rotateX(-180deg) rotateY(0deg)}
to{transform : perspective(120px) rotateX(-180deg) rotateY(-180deg)}
}
@keyframes background{
from{background-color : red}
50%{background-color : green}
to{background-color : blue}
}
</style>