7.07 AI SCHOOL css(6)

이민정·2021년 7월 7일
CSS
0

대구 AI SCHOOL

목록 보기
8/47

✔ TODAY

오늘은 css animation효과에 대해서 알아보았다. 나는 디자인너가 이미지와 효과를 디자인했으면, 그 내용을 개발자가 준 툴에 입력하는 건 줄 알았는데... 그걸...하나하나 입력해야되는 거니...어떤 의미로는 충격과 공포...😱

✔ 학습한 내용

Animation

transform

트렌스폼 선택한 오브젝트의 크기와 각도를 조절, 위치변경때 사용

transform: rotate(-10deg);
transform: scale(2,3);
transform: skew(10deg,20deg);
transform: translate(100px,300px);

  • transform: rotate 2차원적인 회전효과 평면적 회전 효과 값은 -(왼)/+(오)

  • transform: scale(2,3);
    선택한 영역을 비율로 키울때 사용.(w 2배,h 3배) 줄이고 싶을때는 소수점으로 나타나면됨(크기이기때문에 -는 안됨)

  • transform: skew(10deg,20deg) 선택한 영역의 각도에 영향 . 3차원적인 효과 ( x축회전,y최전) -/+값가능

  • transform: translate(100px,100px)
    선택한 영역의 오브젝트의 위치를 변경할떄 사용하는 것 (x축, y축) 마진, 페딩 , 탑~라으트 외에도 이동에 사용함. 배치작업에 사용하는 경우가 있음.

💥주의점**
2d 트렌스폼에 대해서는 지원하는 브라우저 버전이 엣지의 경우에는 10버전이다. 그 외 하위버전에서 사용하고 싶은경우에는
프리픽스를 사용 (일종의 접두사)

-webkit-transform: rotate(10deg); 크럽과 사파리
-moz-transform: rotate(10deg); 피이어 폭스
-ms-transform: rotate(10deg); 익스플로우 9.5 버전까지 적용이 가능
-o-transform: rotate(10deg); 오페라
    transform: rotate(10deg);
	원래값은 + 디폴트
### transition
애니메이션이 움직일때 자연스럽게 보이고 변화하는 과정을 보여주고자 하는 것.

```css
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
ransition-delay: 1s;
  • transition-property: 대상;
  • transition-duration: 2s; 걸리는 시간. 애니메이션 걸리는 시간
  • transition-timing-function : 애니메이션이 움직이는 여러 속도값을 지정.
    (점점빠르게 일정하게 점점 느리게 여러개이 속도의 성격을 지정가능함)
    • linear : 시작부터 끝까지 일정한 속도를 유지
  • transition-delay : 약간의 지연이 있고난 후 움직이게 하는 거

위의 4개의 코드를 한 줄로 정리가능

  transition: width 2s linear 1s;

💥주의점
순서를 상관없으나 듀레이션과 딜레이는 순서를 신경쓸 것.
숫자가 2개있는 경우 먼저 나오는게 듀레이션, 이후가 딜레이.
1개만 있다면 듀레이션만 인식한다.

  • 메뉴버튼에 올렸을대 자연스러원 색상변화를 원할때 사용을 많이한다.

💖tip
애니메이션대상이 한 개 더 추가 되는 경우,(넓이+높이) 해당코드 뒤에 ,치고 그대로 입력하면 된다.
,쳐서 계속 늘릴 수 있다.

animation

hover 없이 자동으로 움직이게 하고 싶은 경우

animation-name: changewidth;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;

  • animation-iteration-count: 반복횟수
    alternate(왕복)를 사용하는 경우, 편도도 횟수로 인정 (즉, 왕복 3회)
    - 무한으로 설정하고 싶은경우 infinite.

  • animation-direction: normal 진행방향

  • animation-direction: alternate왕복효과를 주고 싶을때

@keyframes

  • 키프래임과 애니메이션의 설정을 연동.
  • 키프레임안에는 애니메이션이 발동하는 형태값을 입력
@keyframes 'animation name'
@keyframes changewidth{
	from{width: 300px;}
	to{width: 600px;}}
    300에서 600까지 움직이겠따

from 대신에 0% ,
to대신에 100%를 사용할 수 있다.
즉 중간에 특정% 사용해서 (예. 50%) 효과를 넣을 수 있다
즉,각각 의 중간지점을 숫자로 표현할 수 있다.

1000ms =1m

  • 프리킵스를 달 수 가 있다.
    -달리면 짝이루듯 키프레임에도 달아야된다.
@-webkit-keyframes spin-lion{
	from{......
@keyframes spin-lion

webkit-animation: spin-lion 1.5s linear infinite alternate;
animation: spin-lion 1.5s linear infinite alternate;

포물션을 그리면서 움직이는 코드
css애니메이션온라인툴
https://jeremyckahn.github.io/stylie/

애니메이션html
애니메이션css
위의 속성들 관련 코드는 위에 기제된 링트를 참조.

실무애니메이션

메뉴 마우스 올렸을때 자연스럽게 움직이는 효과

  • opacity : 안에 있는 걸 모두 투명화 안에 있는 글자까지 투명도에 영향을 받음.

    글자에는 영향을 주지 않고 배경만 투명도를 넣고 싶다

.mouse-animation li{
	width: 200px;
	background-color: #0000000;
	padding: 20px;

	border-top: solid 5px #dfdfdf;
	transition: opacity 0.2s, margin-left 0.5s ;
}
.mouse-animation li:hover{
	opacity: 0.5;
	margin: 10px;
}

글씨까지 같이 투명도 부여.

.mouse-animation li{
	width: 200px;
    
	background-color: rgba();
	padding: 20px;

	border-top: solid 5px #dfdfdf;
	transition: opacity 0.2s, margin-left 0.5s ;
}
.mouse-animation li:hover{
	background-color: rgba();
	margin: 10px;
}

rgba(255,255,255,1) 앞의 3가지는 색상 마지막 색갈은 투명도를 뜻함.

움직일때마다 박스의 형태와 색상이 변화

  • animation-play-state

    • running 브러우저 접속시 자동 움직임
    • paused 움직이지 않겠다. 키프레임의 모든값은 설정하지 않음.

  • animation-fill-mode backwards
    박스만들었을떄 최초 색생=시작색상 안하면 부자연스러운 면이 있다. 편리하게 그냥 바로 애니메이션 색상으로 바로 보이고 싶은경우에 사용한다.

0%상태를 최초 사용자에게 보여주겠다 최초상태로 표현 <자주사용하는 기법!!!! >

원형의 크기가 변화면서 원안에 있는 네모도 변화

  • margin: 0 auto; 마진 상하 좌우 = 중앙으로 설정

  • margin-top: 200px; 마진탑으로 윗공간 재설정

  • 스케일은 자식영역가지 영향을 준다.

  • box-sizing: border-box; 원을 벗어나는 일이 없게 하는 것

    슈퍼마리오 동전

    이미지 영역에 마우스를 올렸을때 이미지가 확대되는 효과

💥주의💥
선택자 잘 보기!!

  • 이미지와 글자와 미세한 공백
    : img태그때문 태생적으로 하단에 미세한 공백을 가지고 있다.
    - img태그안에 vertical-align: middle를 넣으면된다.
    - x축정렬로만 사용되는 게 아니라 img 하단의 공백을 없앴을때는 사용
    - 디폴트 값으로 넣기

  • 스케일업과 관련된 효과를 적용하고 싶다.
    - 그럼 overfiow:hidden을 사용
    (특정영역을 벚어났을때 감춤 효과)

  • cursor: pointer; 올렸을때 손가락 모양으로 변함

애니메이션실습html
애니메이션 실습css
실습관련 코드는 위의 깃허브링크를 참조.

✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들

  • 개념 객체들은 별 어려움이 없으나, 실습때 어느 클래스에 어느 속성을 넣어야 될지 헷갈리기 시작했다.
  • 마지막 실습때, position에 대한 복습내용이 나왔는데 아직도 관련 학습이 부족함을 절실하게 느꼈다...

✔ 해결방법작성

  • 개념은 구체적으로 이해! 적용은 전체적인 구조를 짜서 바로 실현하기.
  • 포지션관련은 지겨울정도로 계속해서 읽기

✔ 학습 소감

화려한 효과가 있는 만큼 코드도 길어져서 중후반부터는 선택자나 단위를 혼돈하기 시작했었다 ㅜ. 초초해하지 말고 기초를 탄탄히 쌓자. 느린 것 보다 안하는 것이 더 나쁘다.

profile
이민정
잘하고, 잘하고 싶고, 잘해야되는 사람
이전 포스트

7.06 AI SCHOOL css(5)

다음 포스트

7.08 AI SCHOOL css(7)

0개의 댓글

관련 채용 정보