오늘 수업은 css animation에 대한 내용이었는데 수업이 2시간 40분 가량 평소 2배가량의 분량이라 집중하기 어려웠다. 그런와중에도 헷갈리는것 위주로 정리했고 알거나 복습한 내용들은 배제하고 정리했다. 이렇게 정리하니 다시 공부할때 눈에 더 잘들어오는것 같다.

1) 학습한 내용

• CSS Animation

사이트 내에서 웹사이트에 css가 움직이는 변화, 무빙 등을 구현할 수 있는것

과거에는 자바스크립트에서 구현할수있었는데

지금은 발전된 css언어로 구현가능하다 (물론 간단한것)



Transform

우리가 선택한 오브젝트의 크기를 확대 축소 각도회전 위치를 변경시킬때 사용하는것

transform: rotate(deg)

회전할때 사용 - rotate (음수 혹은 양수들어감 deg)

음수는 왼쪽 양수는 오른쪽

transform: scale(2, 3);

스케일 앞에 2 는 x축으로 2배 키우겠다는 의미

3은 y축으로 3배 키우겠다는 의미이다.

크기를 줄이고 싶다면 소수점숫자를 사용하면된다.

transform: skew(10deg, 20deg);

skew 는 역동적인 애니메이션을 구현할때 자주사용한다.

3차원적인 회전을 주는 효과를 구현할수있는 속성

transform: translate(100px, 300px);

내가 선택한 영역의 오브젝트의 위치를 변경할때 사용

첫번째는 x축으로 두번째는 y축으로 자유롭게 이동시킬수있다.

Transform 의 주의점

버전을 조정할수있는 코드 (프리픽스)

웹브라우저의 하위버전까지 적용해서 사용할수있는 기능을가짐

-webkit-transform: rotate(10deg); 크롬과 사파리
-moz-transform: rotate(10deg); 파이어폭스
-ms-transform: rotate(10deg); 마이크로
-o-transform: rotate(10deg); 오페라

Transition

애니메이션이 변화하는 과정을 보여주는 것이다.

transition-property: ; 바꾸고자 하는영역 설정

transition-duration: s; 트랜지션이 움직이는 속도

transition-timing-function: (linear)속도에 성격에 영향을 끼침 (빠르게 느리게 등등)

transition-delay: 1s; 마우스를 올리고 1초뒤에 시작하게 하는 기능





transition: width 2s linear 1s

위 4줄짜리 코드를 한줄로 줄여서 저장할수있다.

이때 주의점 순서는 상관이없는데

width 2s linear 1s 이때 먼저나오는 숫자가 duration 이고

뒤에나오는 숫자가 delay 이다.




transition: width 2s linear , height 2s linear

이런식으로 변화를 주고자하는속성을 쉼표를 사용해서 계속 늘려나갈수도있다.

animation-iteration-count

애니메이션 진행 횟수 ex) infinite(무한으로)

animation-direction:

애니메이션의 진행 방향을 정하는 속성

ex)normal;(정방향) alternate

(반복효과: iteration count 6이면 갔다오는왕복이 2회이다)

** <li>@keyframes</li>**

**@keyframes** chageWidth {
    _from_{
width: 300px;
height: 300px;
background-color: yellow;
    }

   _to_{
width: 600px;
height: 600px;
background-color: red;
border: solid 10px blue;
    }
}

애니메이션이 사용될때 반드시 같이 사용해야 되는 코드

하지만 꼭 from 과 to 를 사용해야 하는것이 아니다

특정 부분을 % 로 표현할수있는데

시작을 0% 에서 100% 까지 중간중간 25% 50% 부분같은걸

설정해서 애니메이션의 진행순으로 효과를 줄 수 있다.

KIDGAO 웹사이트 사자가 움직이는 효과

animation-name: spinLion;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate; 

이 5줄 코드를 간단하게 추리면

animation: spinLion 1.5s linear infinite alternate;

숫자가 하나만 있다면 duration 두개라면 duration, delay 순서대로 적용된다.

프리픽스를 사용하는 애니메이션을 사용하며

키프레임즈도 프리픽스를 적용해서 사용해야한다.

@-webkit-keyframes spinLion{
 from{
    -webkit-transform: rotate(-10deg);

   }

   to{
        -webkit-transform: rotate(10deg);
    

이런식으로 하위버전의 크롬버전에 적용하려면

프리픽스를 적용해야한다.

css animation 참고사이트

https://jeremyckahn.github.io/stylie/

실무에서 활용되는 다양한 애니메이션 구현하기

rgba(255, 255, 255, 1); 앞의 3개는 색갈 마지막은 투명도를 의미한다.

Opacity - 모든영역에 투명도를 주기때문에 디자인적인 오류가 나오기 쉽다.

animation-fill-mode (animation-fill-mode속성은 애니메이션이 끝난 후의 상태를 설정한다.)

transform: scale(1) - 크기가 점점 커지거나 작아짐

스케일은 자식영역까지 영향을 미친다.
고로 부모가 커지면서 자식의 크기도 같이 커진다.

애니메이션 자식태그의 박스가 부모태그의 박스의 크기를 넘어
부자연스러운 결과를 만들어 낼수있는데

이때 자식이 부모의 영역에 영향을 끼치지 못하게 하는것이
box-sizing: border-box; 이다.

실습

움직이는 박스 만들기

부모자식의 원이 색 크기가 바뀌면서 회전하는 원만들기

슈퍼마리오 동전 만들기

@keyframes jumpCoin {
    0%{transform: translateY(0px);  opacity: 1;}
    50%{transform: translateY(-100px) rotateY(180deg); opacity: 0; }
    100%{transform: translateY(-100px) rotateY(360deg); opacity: 0; }
}

동전이 튀는 효과 translateY(-100px) 사용

동전이 회전하는 효과 rotate(180deg) 사용

이때 주의점이 난 코드의 배치를 마음대로했는데

translateY 와 rotateY를 쉼표없이 같이 붙여놔야 코드가 기능을 했다.

이미지 영역에 마우스를 올렸을때 이미지가 확대가 되는기능 만들기

.hover-image{
    width: 400px;
    border: solid 10px #000000;
}

.hover-image img{
    width: 100%;
}

부모코드는 검은색 줄박스

자식코드는 사진이었다

하지만 사진의 크기가 부모코드의 박스보다 컸고 이탈현상이 일어났다.

이때 사용한 css값은 width: 100% 였는데

부모코드 안에서 width:100% 값이 적용되어서

사진이 줄박스안을 가득차게 들어가는 모양이 되었다.

나중에 이렇게 부모코드와 자식코드사이에 크기 차이가 생길때

사용하면 유용한 방법이다.

vertical-align: middle; 인라인 요소의 x축 정렬을 할때 사용하지만,

이번 실습에서 사진과 사진설명칸의 중간 여백을 정리할때도 사용되었다.

css 애니메이션 참고 사이트

https://animate.style/

(1) animate__animated (2) animate__bounce (3) animate__delay-2s

첫번째 클래스는 고정값이다

두번째 클래스는 애니메이션의 종류이다

세번째 클래스는 딜레이나 움직이는시간 등

https://codepen.io/ 에서 검색해서도 사용가능하다.

8일차 Github (1)

8일차 Github (2)

2) 학습내용 중 어려웠던 점

animation의 구조와 코드를 모두 외울 순 없다. 그러나 어떤 구조로 돌아가는지 정도는 알고있어야 한다.
실제로 실무에선 프레임워크를 많이 사용한다고 들었다.
전반적인 모든부분이 조금 생소했으며 내용자체가 혼란스러웠진 않지만 난이도가 있었다.

3) 해결방법

구글링도 좋지만 의외로 네이버같은곳이 더 이해하기 쉽게 풀어놓은 블로그들이 많아서 좋았다.

4) 학습소감

진도를 따라간다고 복습에 투자하는 시간이 적은것같다. 좀 더 열심히해야겠다.