transform
transform은 변화시키는 기능이다. 요소가 마치 다른 요소로 짠!변화한것처럼 보이게 만드는 것이다.
1) translate : 이동
<style>
#선택자{
transform: translateX(50%);
--자기크기를 기준으로 절반만큼 오른쪽으로 이동한다.
2) scale : 배율, 좌우반전
- 스케일은 hover시 후버한 요소가 커질 때 유용하다.
- 다음과 같이 상하/좌우 반전을 시킬 수도 있다.
(transition 속성과 같이 쓰면 카드를 뒤집는 것과 같은 효과 (flip)을 낼
수 있다.
<style>
#선택자{
transform: scaleX(-1) --- 좌우반전
transform: scaleY(-1) --- 상하반전3) rotate : 회전
<style>
#선택자{
transform : rotate(90deg);} --90도로 회전시킨다4) skew** : 경사도
transition
transition은 transform과 비슷하지만 천천히 전환시킨다는 점에서 차이가 있다. 요소에 추가한 css스타일의 전환효과 및 지속 시간을 설정할 수 있다. transform과 같이 사용하면 천천히 변화하는 모습을 줄 수 있다.
transition : property duration timing-function delay
property : 전환 효과를 적용할 css 속성. width, height, opacity등을 설정할 수 있다.
duration : 지속 시간
timing-function : 변화 속도,전환 속도
(linear: 일정속도,
ease:변화하면서,ease-in-out: 점점 빨리)
애니메이션
애니메이션은 요소에 움직임을 추가할 때, 특히 변화를 반복하는 움직임을 추가할 때 많이 사용하는 css속성이다. (당연히 style태그안에 들어간다)
로딩 할 때 원이나 모래시계가 계속 돌아간다거나..
애니메이션에서 중요한 특징은 '초기 스타일'이 기준이 된다는 것이다.
또한 애니메이션에서는 @keyframes이라는 특별한 명칭을 사용한다.
#선택자{
animation : 애니메이션이름 duration (delay) count direction}
( 이름 지속시간 (딜레이시간) 지속횟수 방향 )
@keyframes 애니메이션이름{
from (0%){
초기 시작 상태
}
50%{
중간 상태}
to(100%){
마지막 상태
}
애니메이션의 예시 코드이다.
<Style>
.box{
animation: moving 3s infinite reverse}1. moving(name): 애니메이션이름
2. 3s (duration): 지속시간은 한 움직임당 3초
3. infinite(count) : 애니메이션을 무한히 반복
4. reverse(direction) : 애니메이션을 반대 방향을 실행
위의 'moving'이라는 애니메이션을 실행하기 위해서는 moving이라는 애니메이션의 css에 정의되어 있어야 한다.
@keyframes moving{
from{ } ----(1)
50%{ padding-left: 30px; } ----(2)
to{ padding-left:50px;} ----(3)
}애니메이션은 실행될 때 처음 속성을 기준으로 실행된다는 사실을 잊지말자. 예를 들어 위코드를 보면, 마지막 요소의 위치는 왼쪽에서 50px이지 30px+50px = 80px이 아니다. 무조건 처음 속성이 기준이 된다.
그라데이션
그라데이션은 말 그대로 한 요소에 색상을 혼합할 때 사용하는 css 속성이다. 문법은 다음과 같다. background를 background-color로 주지 않도록 주의하자.
background : linear-gredient(방향, 색상1, 색상2,..)
background : radial-gradient(ellipse at 방향, 색상1, 색상2, ..)
.gra1{
background: linear-gradient(to right, red, yellow, green);}
.gra2{
background: linear-gradient(to top, red 50% ,transparent 50%); }크기를 조정했더니 다음과 같은 결과가 나온다.
