css와 트랜지션과 애니메이션
트랜지션
-예를들어 특정조건(마우스 오버)을 주었을때
일정한 시간동안 웹요소의 스타일이 바뀌는것
트렌지션 속성>
transition-property 트랜지션 대상을 설정
transition-duration 트랜지션 진행시간 설정
transition-time-fucntion 트랜지션 속도 곡선 설정
transition-delay 트랜지션 지연 시간 설정
transition 위의 속성을 한꺼번에 설정
transition-property 속성
-트랜지션을 어떠한 곳에다가 적용할것인지 설정하는것
- 이 속성을 지정하지않으면 모든 속성이 트랜지션 대상이됨
transition-property:all/none/속성이름
-all all 값을 사용하거나 transition-property를 생략할경우
모든 요소의 속성이 트랜지션 대상이됨
기본값임
-none 트랜지션 동안 아무 속성도 바뀌지않습니다.
-속성이름 트랜지션 효과를 적용할 이름을 지정합니다
예를들어 배경색만 바꿀것인지 width값을 바꿀것인지
원하는 대상만 골라 지정할수 있습니다.
대상이 여러개일경우 쉼표로 구분해 나열합니다
transition-property:all;
transition-property:background-color;
transition-property:width,height;
transition-duration 속성
-트랜지션 진행시간 지정
-시간 단위는 초 또는 밀리초
-트랜지션이 여려 개 라면 쉼표로 구분해 진행시간 지정
예)
.trl{
width:100px;
height:100px;
background-color:blue;
transition-property:width, height;
transition-duration:2s, 1s;
}
.tr1:hover{
width:200px;
height:120px;
}
transition-timing-function 속성
트랜지션 시작과 중간, 끝에서의 속도 지정
transition-timing-function: linear/ ease / ease-in / ease-out / ease-in-out / cubin-bezier(n,n,n,n)
속성값 설명
-linear 시작부터 끝까지 똑같은 속도로 트랜지션을 진행
-ease 처음에는 천천히 시작 하고 점점빨라지다가 마지막에는 천천히 끝냅니다. 기본값입니다
-ease-in 느리게 시작합니다
-ease-out 느리게 끝납니다
-ease-in-out 느리게 시작하고 느리게 끝납니다
-cubin-bezier(n,n,n,n) 배지에 함수를 직접 정의해 사용합니다.
n에서 사용할수 있는 값은 0~1 입니다.
transition-delay 속성
트랜지션이 언제부터 시작될지 지연시간 지정
시간 단위는 초s 또는 밀리초ms 기본값은 0
예)
#no-delay{
transition-duration:3s;
}
#delay{
transition-duration:3s;
transition-delay:1s;
}
===========================================
css 애니메이션
-웹 요소에 애니메이션 추가
-애니메이션을 시작해 끝내는 동안 원하는 곳 어디서든 스타일을
바꾸며 애니메이션을 정의할수있다.
-키프레임(keyframe): 애니메이션 중간에 스타일이 바뀌는 지점
*css 애니메이션에서 사용하는 주요 속성
(인터넷 익스플러러 10 이상과 최신모던브라우져 이전 버전을 고려하려면
-webkit , -moz 접두사를 붙여야한다)
-@keyframe 애니메이션이 바뀌는 지점을 설정
-animation-delay 애니메이션 지연시간 설정
-animation-direction 애니메이션 종료후 처음부터 시작할지, 역방향으로 진행할지를 지정합니다
-animation-duration 애니메이션 실행시간 설정
-animation-fill-mode 애니메이션이 종료되거나 지연되어 애니메이션이 실행되지않는 상태일떄 요소의 스타일일 지정합니다
-animation-iteration-count 애니메이션 반복 횟수를 지정
-animation-name @keyframes로 설정해 놓은 중간 상태의 이름을 지정합니다
-animation-play-state 애니메이션을 멈추거나 다시 시작랍니다.
-animation-timing-function 애니메이션의 속도 곡선을 지정합니다.
-animation 애니메이션 하위 속성들을 한꺼번에 묶어 지정합니다.
@keyframes 속성
-애니메이션의 상태를 나타내 주는거다.
-어떻게 어떻게 진행된다 라는걸 알려주는 속성입니다.
-애니메이션의 시작과 끝을 비롯해 상태가 바뀌는 지점을 설정
-이름 으로 애니매이션 구별
@keyframes <이름> {
<선택자> {<스타일>}
}
- 시작 위치는 0%, 끝위치 100% 로 놓고 위치 지정
- 시작과 끝 위치만 사용한다면 from , to 키워드 사용 가능
- @-webkit-keyframes 나 @-moz-keyframes 처럼 브라우져 접두사를 붙여야함
예)
div{
width:100px;
height:100px;
background-color:blue;
animation-name:change-bg;
animation-duration:3s;
}
@keyframes change-bg{
from{
background-color:blue;
border:1px solid black;
}
to{
background-color: #a5d6ff;
border:1px solid blue;
border-radius:50%;
}
}
animation-name 속성
@keyframes 속성에서 만든 애니메이션 이름을 사용
예)
#box1{
background-color: #4cff00;
border: 1px solid black;
animation-name: shape;
animation-duration: 3s;
}
#box2{
background-color: #8f06b0;
border: 1px solid black;
animation-name: rotate;
animation-duration: 3s;
}
@keyframes shape{
from {
border:1px soild black;
}
to{
border: 1px solid black;
border-radius:50%;
}
}
@keyframes rotate{
from {
transform:rotate(0deg);
}
to{
transform:rotate(45deg);
}
}
animation-duration 속성
-애니메이션 실행시간 설정 기본값 0
- 사용 가능한 값은 초s 나 밀리초 ms
animation-direction 속성
-애니메이션이 끝난후 원래 위치로 돌아가거나 반대방향으로 애니메이션 실행하도록 지정
-nomal 애니메이션을 끝까지 실행하면 원래 있던 위치로 돌아갑니다. 기본값입니다.
-alternate 애니메이션을 끝까지 실행하면 왔던 방향으로 되돌아가면서 애니메이션을 실행합니다.
animation-iteration-count 속성
애니메이션 반복 횟수 지정하기
속성값
- 숫자 입력한 숫자만큼 반복합니다. 기본값은 1 입니다
- infinite 무한 반복합니다
animation-timing-function 속성
애니메이션 속도 곡선 지정
animation 속성 생략해서
한꺼번에 다적기
이렇게 아래 방법 처럼 각 각 적는 방법이 있고
.box{
animation-name:moving;
animation-duration: 3s;
animation-timing-function:ease-in;
animation-direction:alternate;
animation-iteration-count:infinite;
}
근데 아래처럼 생략해서 적는 방법도 있다 순서는 동일
.box{
animation: moving 3s alternate infinite ease-in;
}
예)
.box{
width:60px;
height:60px;
margin:60px;
animation: rotate 1.5s infinite , background 1.5s infinite alternate;
}
여기서 코드설명은..
애니메이션에서
rotate라는 이름으로 1.5s 시간을설정하고 무한반복이며,
background 라는 이름으로 1.5s 시간 설정후 무한반복 과 색상이 변경된다는 설정을 코딩하고 아래 키프레임 설정을 한다..
@keyframes rotate{
from {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
transform:perspective(120px) rotateX(-180deg) rotateY(0deg);
}
to{
transform: perspective(120px) rotateX(-180deg) rotate(-180deg);
}
}
@keyframes background{
from{background:red;}
50%{background-color:green;}
tp{background-color:blue;}
}
