CSS
이전에 javascript를 공부하다가 마지막으로 css를 적용시키는 단계에서 활용한 속성들이다.
1. transition
CSS property값이 변화할때 일정시간에 거쳐 일어나도록 만드는 것이다.
나는 transition을 유저의 이름을 받아오는 input 태그에 작성하였는데
.ex:hover {
transition : all 1s
background-color:white
color:black
opacity : 0.7
}
이렇게 작성하였다. 위 transition은 ex클래스 가 있는 태그에 마우스를 올리게되면 1초 동안 모든 요소들이 반응 하게 만드는 것인데
1초 동안 배경색은 흰색으로 변경되며 글자색은 검은색
투명도는 70%로 변경되게 만들었다.
transition 코드에서 all은 모든속성을 뜻하고
1s 가 뜻하는 것은 duration(일정시간) 즉, 내가 지정한 시간안에 변경하게 만드는 것이다.
transition property에는
1.transition-property : 트랜지션 대상이 되는 CSS property를 지정한다 (기본값 all)
2.transition-duration : 트랜지션이 일어나는 시간을 지정한다 (기본값 0s)
3.transition-timing-function : 트랜지션 효과를 위한 함수를 지정한다 (기본값 ease)
1 ease :기본값. 느리게 시작하여 점점 빨라졌다가
느리지면서 종료한다
2 linear : 시작부터 종료까지 일정하게 움직인다
3 ease-in : 느리게 시작한 후 일정한 속도에 다다르면
그 상태로 움직인다.
4 ease-out : 일정한 속도로 시작해서 점점 느려지면서 종료한다
5 ease-in-out : 느리게 시작하여 느리지면서 종료한다.4.transition-delay : property가 변화한 시점과 트랜지션이 실제로 동작하는 시간 사이에 대기시간을 뜻한다 (기본값 0s)
5.transition : 위 모든것을 한번에 지정한다.
2. animation
1. animation-name : 키 프레임 애니메이션 이름 지정
@keyframe 을 이용하여 사용가능
2. animation-duration : 애니메이션 재생시간
0, 3s, 1.5s, 300ms
기본 값 0은 애니메이션 재생되지 않음.
3. animation-timing-function : 진행속도,가속방식 설정
linear , ease , ease-in , ease-out , ease-in-out , step-start , step-end 등 여러가지 중 한가지 선택 가능.
4. animation-delay : 애니메이션 시작 지연시간
0s, 0ms, 미지정: 지연 없이 즉시 애니메이션 시작.
3s: 3초 후 애니메이션 시작.
500ms: 0.5초 후 애니메이션 시작.
5. animation-direction : 재생방향
normal: 정방향 재생
reverse: 역방향 재생
alternate: 정방향과 역방향으로 한 번씩 번갈아 재생(정 방향 시작)
alternate-reverse: 역방향과 정방향으로 한 번씩 번갈아 재생(역방향 시작)
6. animation-iteration-count : 반복횟수 지정
양수: 정수로 횟수 표기. 횟수만큼 애니메이션 반복 실행 후 정지.
infinite: 무한 반복
7. animation-play-state : 초기 실행상태 지정
(웹 페이지 로딩 후 애니메이션을 자동실행 할지 여부선택가능)
paused: 애니메이션이 일시 중지된 상태 유지
running: 애니메이션이 재생중인 상태.
3.keyframe
animation-name으로 지정한 keyframe을 가지고
아래와 같이 함수를 작성하여 애니메이션에 따로 css 스타일 적용가능하다.
@keyframes ex{
to{
background-color:red
color:white
opacity:0.5
등등
}
form{
여러가지 css 스타일~
}
}from : 총 애니메이션 지점 0% (처음부터)
to : 총 애니메이션 지점 100% (끝까지)
그 외에 따로
0% , 50% ,20% 애니메이션지점을 퍼센트로 따로 작성 할수 있는데
@keyframes ex{
20%{
color: blue
}
}위와 같이 작성하면 애니메이션 20% 지점부터 해당 스타일을 적용한다는 뜻이다.
