HTML/CSS animation, transform

강정우·2022년 7월 4일
0

HTML, CSS

목록 보기
3/27
post-thumbnail

1. transform

  • transform이란 어떤 object를 돌린다거나 크기나 위치를 조정할 때 사용
  • rotate(00deg); : 입력한 각도만큼 회전(음수도 입력 가능)
  • scale(0,0); : 숫자의 비율을 의미 앞자리는 width 뒷자리는 height 만큼 확대 축소는 소수점!
  • skew(00deg,00deg); : x축, y축으로 입력한 만큼 각도를 비틂
  • translate(00px, 00px); : 선택한 오브젝트의 좌표 변경
  • prefix 접두사 : CSS3의 최신언어이기때문에 각각의 브라우저의 버젼에 맞춰 넣어줘야함
<style>
	.transition{
    -webkit-transform : translate(100px, 200px);	// chrome, safari
    -moz-transform : translate(100px, 200px);	// firefox
    -ms-transform : translate(100px, 200px);	// explore 9.0
    -0-transform : translate(100px, 200px);	// opera
    }
</style>

2. transition

  • property: (width|background-color,...); : 효과를 적용하고자 하는 CSS 속성
  • duration: 0s; : 효과가 나타나는데 걸리는 시간
  • timing-function:linear; : 효과의 속도 linear은 일정하게라는 의미
  • deplay : 0s; : 특정 조건하에서 효과 발동
  • (가상선택자) hover : CSS에서 미리 만들어놓은 클래스
  • 예시
<style>
	.class_name{
    	// 아래처럼 한 줄로 가능
    	.transition : width 2s linear 1s;	// 처음 나오는 s는 duration 
        .transition : hover{width : 300px;}	// 2번째 나오는 s는 delay
    }
</style>

#result
## 마우스를 올리면 1초 후에 width값이 300px로 2초동안 
## 속도 일정하게 변하는 애니메이션 효과

3. animation

  • 조건에 상관없이 이벤트를 생성할 때 ex) 웹사이트를 접속하자마자
  • animation-name : name; : class처럼 이름을 생성
  • animation-duration : 0s; : 실행되는 시간
  • animation-timing-funtion : linear; : 속도 곡선을 제어
  • animation-deplay : 0s; : 시작전 deplay 시간
  • animation-literation-count : 6; : 애니메이션 반복 횟수
  • animation-direction : alternate; : from -> to -> from 시작->끝->시작
  • animation-direction : normal; : from -> to,시작->끝
  • animation-direction : reverse; : to -> from,끝->시작
  • @kayframes : 애니메이션을 적용하기위해선 반드시 필요한 문자
@keyframes animation_name{
	from{ width : 300px; }
    to{width : 600px; }
}

4. transform & animation

  • Ex)
<style>
.box1{
	// 1500ms == 1.5s
	-webkit-   animation : rotation 1500ms linear infinite alternate;
}
@-webkit-keyframes rotation{
	from{ -webkit- transform : roate(-10deg); }
    to{ -webkit- transform : roate(10deg); }
}
</style>
profile
智(지)! 德(덕)! 體(체)!

0개의 댓글