Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 24강 CSS3 애니메이션
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 불수 입니다 자 오늘 html css 24번째 시간 css3
에서 지원하는 애니메이션에 대해서 살펴보는 시간을 갖도록 하겠습니다 자지난 시간에 우리가 css3 에 변형에 대해서 트랜지션 에 대해서
살펴봤습니다 그래서
트랜지션 듀레이션 이라든가 딜레이를 이용해 줘
우리가 어떠한 그 색상이 라든가 아니면 모양 형태의 변화를 주는데 그
변화를 주는 과정을 우리가 조제를 해봤죠
그래서 사각형의 똥그란 원이 된다 던가 아니면 사각형이 좀 크게 된다던가
이런거 지는 살펴봤습니다
자 오늘 살펴본 내용은 애니메이션 이에요 그래서 키 프레임과 애니메이션
이라고 하는데
자 애니메이션 이면 지난 번 했던 것은 그 형태가 변하거나 색상이 변하는
거에요 근데 오늘 알아볼 내용들은 주로 대부분 다 어떤 거냐면 위치 가변
한다.든가 위치 값이 변 한다.던가 그런
그 키프레임 애니메이션 플래시 에서 과거 플레이스에서 많이 지원했던
키플레이어 애니메이션은 css3 스 도 이제는 지원이 가능하다는
얘기입니다
그런 것들에 대해서 살펴보는 시간을 갖도록 하겠습니다
자 키프레임 애니메이션 속성입니다 그래서 여기 보면 사각형이 이렇게
있구요 여기에 지금 써클이 역에서 똥그란 원아 있습니다
이런게 어떠한 그 코드를 입력을 해주면 내가 이렇게 중 넓어져 요
이렇게 왜 그래서 프롬 투가 있죠
즉 100 픽셀 서 부터 시작을 해서 500 픽셀 까지 쭉 늘어 한다.는
겁니다
여기가 100 픽셀이 고 여기 끝에 가 여기가 500p 세렌 얘기겠죠
이런 애니메이션 드실 수가 있고요 아니면 이렇게 동그란 원 있어요
동그란 원에 위치 값이 있겠죠 절대 위치가 예로 들어서 탑이 100 이다
래 프 트 가 빵이다 0이다
그럼 이 식감이 있을텐데 그런 위치 값을 변경을 좋았고 그 서클이
이 밑으로 하단으로 좀 내려 온 거고 확인이 되시겠죠
이렇게 그래서 프롬 과 투르 려 왔고 프롬 레포트 가 0이고 탑 212
어때요 처음에
여기에 위치한 좌표 값이 좌표 값이 0 콤마 탑 110 이었는데
개를 레프트 500 왼쪽에서 오베 그 다음에 위쪽에서 610 위치까지
이동시키는 거에요 그럼 대항 선을 이렇게 움직이게 쬲
근데 움직일 때 그냥 움 진게 아니라 트랜스폼 이라는 속성을 좋았고 로
테이트를 치킨 돼요 처음에 영도구 요 360도 즉 한바퀴 삥 돌면서
내려오면서 삥 들면서 여기까지 온 단 얘기겠죠
요런 키프 헤맨 이미 전 들이 있습니다
잘해서 요런거 메뉴에 활용할 수 있겠어요 마우스 가 올리면 마우스 올리면
어떤 애니메이션이 될 수 있겠죠 그래서 지난 시간에 살펴보았던 트랜지션
속성 하고 비싸게 애니메이션에도 애니메이션 2 레이저 니트 레이 션 땜에
디렉션 이런 것들이 속성들이 있습니다
그런거 하나씩 살펴보도록 하겠습니다 자 하나씩 살펴보기 이전에
어제가 지난 시간에 우리가 변형 트랜지션 에 대해서 살펴볼 때
박어 자바 스크립트나 j 커리 아니면 플래시 에서 지원하는 기능을 cs3
에서도 지원을 하기 시작했기 때문에 이런 내용이 있다라고 제가 설명을
들었는데
그러면서 어 아직 그리 많은 곳에 사용을 되지 않고요 사용되지 않고
어트 특별한 목적에서 간혹 사용됩니다 그래서 오늘 알아보는 키 펜과
애니메이션 애니메이션 속 등도 그렇게 많이 쓰이거나 사용되지 않습니다
특별한 목적에서 간혹가다 쓰일 지언정 아직 그렇게 많이 쓰지 않고요
그리고 이러한 극히 프레이 메뉴에 생가 트렌디 전진하자 나왔던 속성들이
모든 브라우저에서 다 지금 지원을 하고 있지 완벽하게 지원을 하고 있지
않습니다
함께하기 때문에 내가 만드는 문서가
모든 브라우저에서 공통적으로 다 보여야지 좋겠죠
그래서 그런 것을 음 감안해서 벤더 프리픽스 라는 그런 기능도 우리가
활용하는데 어쨌든 간에 모든 브라우저에서 지원하지 않고 완벽하게 다른
애니메이션 도구들 플래시 라든가 자바스크립트 제이쿼리 만큼 완벽한 기능을
아직 구현을 하지 않기 때문에 그리 많이 쓰진 않고 하지만 알고는 있어야
겠죠 특수한 목적 에서 간혹가다 쓸 일이 있을 쓸 수 있겠죠
그래서 오늘 가볍게 개념 정도 아는 정도 수준에서 학습을 해 보도록
합니다
자 소수로 가볼게요 소수로 가조
자 꺼내 보는데 제가 아까 벤더 프리픽스 라고 잠깐 설명해 주셨는데 단자
프릭스 뭐냐면
자 여기 보면 프리픽스 민 js 가 나오죠
요 파이 줘 로 파일로 어져 다른것을 다운받은 곳 다운 받은 건데요
벤더 프리픽스 가 뭐냐면 내가 내가 만든 지금 css 에서 애니메이션이라
트랜지션 같은 최신의 기법들은
모든 브라우저 지금 사용하고 있는 거 제가 강의 중에 사용하는데 크롬
브라우져 요 크럼 브라우저 라든가 아니면 뭐 ns 에서 인터넷 그
익스플로어 다음에 모질라 에서 만든거 파이어폭스 다음에 오페라가 안드는
사파리
고는 많은 브라우저 들에서 모든 기능을 다 아직 지원 완벽하게 지원을
하고 있지 않습니다
근데 내가 만든 브라우저와 크라우저 크롬 브라켓 했어요 그러고 웹사
돌려서 쭉 세상에 널리 알려 써요 근데 사용자가 볼 때 예를 들어서 ms
인터넷 익스플로러 에서 파악 보고있어요 근데 내가 만든 애니메이션 기능을
인터넷 익스플러 cm 원을 하지 않아요
그러면 내가 애써서 만든 기능들 볼 수가 없겠죠
자 그래서 그럼 기능들 또는 과거의 사용하는 과거에 사용했던 브라우저 들
그럼 브라우저를 통틀어서 모든 브라우저에서 다 볼 수 있게 만드는
벤더 프리픽스 라는 태그를 넣어 줘야 됩니다 그래서 밴더 프릭스 를 택을
넣어주는데
업 앤 더 프리픽스 태그를 그 코드를 여기 원래 스타일시트 a 다가 다
이렇게 일일이 넣어 줘야 되요 근데 그 다 보면 코드 양이 어마어마하게
많이 늘어납니다
하기 때문에 그걸 우리가 벤더 프리픽스
이 화일을 이용을 합니다 이 화일을 같은 경우에 넣어놓고 2화 1 갔다가
여기 보시면 스크립트 sc 프리픽스 민 js 요렇게 경로를 지정해 줘요
그러면 성 8 열어볼까요 굉장히 많은 코드가
주악 에서 그냥 안 포머 들어 있죠 이런 코드를 활용해 서 과거에
사용했던 지원하지 않는 브라우저 등에서 다 활용할 수 있게 만들어주는
겁니다 자 저 아이를 같은 곳에 넣어 놓고 우리는 이렇게 링크만 걸어
주면 되요
이제 그러면 이 기능의 모든 브라우저에서 다 사용을 사용될 수가 있도록
해줄 수가 있겠습니다
자 벤더 브리핑을 좀 다 자세한 내용은 여러분들이 인터넷 브라우저나 이런
웹브라우저 문서를 통해서 한번 다시 살펴 보시기 바랍니다 자세한 내용이
있고 저 파일을 다운받는 곳도 나와 있습니다 본 것을 한번 참고해
주시구요
자 오늘은 css3 에 포커스를 맞춰서 거기서 사용하는 애니메이션 돼
기능에서 한번 살펴보도록 하겠습니다
자 먼저 이거를 제가 브라우저에서 보기 로 한번 브라우저도 보도록 할게요
음 자 보시면 시작하자마자 몰랐던 게 쭉 옆으로 늘어나요 그리고 원인
삥 삥 을 보면서 대각선 밑으로 떨어지는거 확인이 됩니다
어떻게 해서 이렇게 애니메이션은 좋은지 살펴보도록 합니다
자 먼저 html 태그를 보니깐 html 태그는
바깥쪽에 랩이 있구요 다음에 안쪽에 맥 그 디비전 태그가 2개가 있는데
하나는 내기 고요한 않은 써클이 라고 되어 있습니다
죠 자 그리고 적들에 대해서 이제 css 속성을 주는데
자 여긴 초기 값이 들어가 있구요 레븐 포지션 1 버티고
자의 안에 포지션이
음 어디에 있을까요
포즈 연예 앞 솔로 틀어 이렇게 지정이 됩니다
자 그렇기 때문에 바깥쪽에 는걸 sl 종 일 에 팁을 중 거고요
자 그 다음에 렉 트 부터 살펴보도록 합니다 사각형 사각형 엄폐 크라우드
컬러의 노란색이 줘
다음에 가로 100 세로 뵈 속성을 갖고 있고 뭐 행간 이건 팩 갖고
있고요 텍스트 온라인 가운데 그래서 가운데 표시되고 있습니다
자 여기 나 애니메이션을 주는데 키프레임 애니메이션을 주기 위해서 이런
규칙을 우리가 사용합니다
그래서 키프레임 애니메이션 여기는 애니메이션 이름 사용자가 마음대로
정하면 되요 여기다 이런데서 lxx 키 정의 됩니다
이 키프레임 앞으로 그
쪽이 왜선 원대 키 프레임의 애니메이션의 이름을 정하는 곳입니다
자 이름 같다 아까 요기가 애니원 1호 지정 됐죠
그래서 이렇게 지정해놓고 이 애니메이션을 사용하고 싶은 요소들이
애니메이션 이름으로 이렇게 사용을 할수가 있겠습니다
그래서 내가 원하는 애니메이션 역시 지정해 나요 열어서 프롬 어 팩 픽셀
100 픽셀 서부터 가로 사이즈를 백서 부터 어디까지 가로 사이즈를
500 픽셀 까지 키운 되요
요런 애니메이션을 두고 이 애니메이션 누가 쓸 것이냐
네트의 가 쓰는 거에요 스위 위해서 애니메이션 이름을 애니원 여기는 것을
기입을 여기다가 네임 숙성 에다가 속성 값으로 기입을 해주면 되겠습니다
자 다음에 트랜지션 하고 거의 비슷하게 트렌드 전에도 줄에 이전이라는
속성 있었죠
2 대전을 좋았고 2초 동안 애니메이션이 되는 시간을 정할 수 있고요 그
다음에 음 타이밍 평생을 좋았고 이젠 점점 빨리 점점 빠르게 애니메 제
되게 이런 속성도 주어질 수 가 있겠습니다
그래서 세우고 침해 보면 대개 에서 500 픽셀 로 프롬 댁에서 투 백
그루 쭉 확대 되는거 황 행이 될 수 있겠습니다
만약에 여기서 속성을 하나 더 줘요 그래서
높이가 대개 서 론
그 다음에 에
되게 되고 500 그대는 어떻게 되 있어요
높이도 커질 수가 있겠죠 이렇게 크다란 원인이 될 수가 있겠다 사업장의
나올 수 있겠습니다
아 그 다음에
자 그 다음에 써클 한번 볼까요 자 써클은 백그라운드 컬러가 이런 색
이래요
음 핑크색 이네요 자 가루가 100 이고 세로가 100 인데
디비전 dr div 태그 태그 태그 이기 때문에 처음에 기본적으로 4
악행을 겁니다 그걸 앱솔루트 레프트 형 탑 110
요기 요요 잡혀 놓고 라인의 트 좋구요 그 다음에 여기 보면 보도
레이저 쓸 백을 좋죠 그래서 똥글 한겁니다 만약에 이게 없으면
없으면 통 그래미 아니겟죠 되고
없으면 좀 내릴까 요 이거 보기 편하죠 아예 이거 내려서 볼게요 자
만약에 이게
음 이 값이 없다 이 값이 없으면 어떻게
통 불행니라 사각형 이겠죠 자의 동그랗게 만들어 주게 설에 쥬스를
과하게 1 100 정도 접었습니다
자 잠에 얘는 애니메이션 2번을 순대 요 그래서 애니메이션 입안이 5기
테 있네요
키프레임 규칙에 n 이미지 2번을 먼저 선언해 놓은 거구요
이 이번에 애니메이션 쓰게 탄 얘기입니다 자두 레이 션은 똑같이 2초를
쓰고있구요 다음에 타이머 저는 이지인 점점 빨리 가게 하는
이제 인을 좋습니다
자 그 다음에 레프트 가 처음에 0에서 110 이에요 그러니까 처음 원래
있던 이 녀석이 있던 0에서 110명 실행을 하겠죠
다음에 트랜스폼 어떤 변화를 주려면 로 테이트 영도 래요
롯데 정도면 저녁 줘 돌아가는게 아니었겠죠
자 여기서 부터 시작을 해서 프럼 역습 때 시작을 해서 투 어디까지 간
가는지 설정한 겁니다 자 레프트 가 502 거탑 210 이에요
왼쪽이 500 이고 위에서 611 내려온 되어 보면 이만큼 가고 이만큼
내려 겠죠
거기까지 트랜스폼 걸 까지 위치를 반응 시키는데 그 때 트랜스폼 이란
속성을 좋았고 로 테이트 3명이 또 회전을 시킨 되요 그러면 산맥
토해내면서 휴 내려 겠죠 그래서
체력을 침해 보면 요런 모양이 나올 수가 있겠습니다
제 자 그래서 애니메 저항 키 프레임이 라는 규칙을 사랑해주고 거기다가
이름을 보여줍니다 그리고 그 이름을 사용해서 내가 원하는 태그 에다가
그 이름을 그 트랜 그 애니 메이저 키프레임 애니메이션을 적용시킬 수가
있겠습니다
자 그 다음에 또 다른 거 알아 볼까요
예 자 이거 봅니다 이곳도 제가
음 브라우저에서 한번 보도록 할게요 자 보면 얘는
애니메이션이 계속해서 연속 되고 있죠 그쵸
사각형 에서 동그란 원으로 쭉 갔다가 다시 돌아오고 있습니다
색상도 변경 제 9조 노란색에서
음 갈색 종류로 쭉 변화되고 있습니다 요런거 다음에 오버 오벌 하면
중간에 참지 멈춰요
이렇게 nunc 멈추고 있죠 자 다음의 메뉴가 있는데 메뉴 에다가 마우스
가 되니까 점점 드러나죠
마우스 드러나고 애니메이션의 한 분만 쟁 된게 아니라 계속해서 진행되고
있습니다
마우스를 빼면
엠하우스 빼면 애니메이션이 중단되고 있습니다
자 이런 효과들을 어떻게 만드는지 하나씩 살펴보도록 합니다
자 먼저 htm 의 구조를 살펴볼게요 html 구조는
램으로 되어 있고요 다음에 크겠지요 디비전 태그로 크게 2가지가 있고
간단한 거예요 그때 요건 소통 사람들 살펴 볼까요 자 렉 트 가 있는데
드렸죠 얘는 어떻게 생각하면 레벨 엑트는 포지션에 엡솔루트 구요
자매 위드가 100 그 다음에 높이가 100 이래요 가로 100 세로
백인 사각형 이구요
다음에 보도 레디 오스 가십 이래요 그러면 뭐 소리가 약간 둥근 사각형
겠죠
자 다른것은 뭐 별로 붉고 없을꺼 같구요
자 포지션 젭슨 루트에 어
중복된 레코드가 이 필요없겠죠 이거 주 못했으니까
자 이거 빼주고 요 자 레프트 영어 줬어요
음 됐죠 그래서 처음에는 왼쪽에 딱 붙어 있는 겁니다
왼쪽에 붙어 있다가 점점 점점 원이 되면서 굴러가고 있는 거 어떻게
애니메이션 없는지 살펴 보도록 합니다
자 애니메이션 네임을 보니까 렉 트 애니웨어 렉 트 n2 키프레임
규칙으로 여기 선언을 해 놓았구요
얘는 어떠한 애니메이션 인지 보니까 가루가 베개
가루가 백에 레프트 영서 부터 시작하구요 트랜스폼 로 테이트는 영도 레오
방금 우리가 설 것 같은 내용 그대로 줘
택틱스 의사 평 6 어조 이거에 레프트 왼쪽에 딱 붙어 있대요
다음에 트랜스폼 정도 여기서 부터 시작을 하는 거죠 여기서 2c 여기서
부터 시작을 해서 투 어디까지 위드 200 픽셀 입니다
그래서 이베이 베개의 높이가 입에 가로 세로 200 이고요
보던 에듀스 가 기본적으로 10 이었는데
배까지 들어간 되요 그래서 이런 원이 결과적으로 만들어질 수 있겠고요
라인 에이트 200으로 높이가 200 이니까 라인 에이트 도 200
줬어요 그래서
여기서도 가운데 정렬이 지만
이렇게 컬러스 때도 어떻게 세로 쭉 가운데 정렬을 이룰 수 있겠고요
백그라운드 칼라를 변화를 주고 요 레프트 는 왼쪽에서 부터 시작해서
500 픽셀 떨어진 거 지 이동을 하구요
트랜스 범은 로테 이틀에서 3명이 돌아간 데요 폰트 사이즈도 커지고
있구요
굉장히 많은 속성을 좋죠 많은 속성을 줬지만 다 이게 우리가 이미 배운
것들이죠
그저 자 이처럼 애니메이션에는 우리가 배운 속성의 태부 부록 다른
지원하지 않지만 대부분의 수송을 다 넣을 수가 있습니다
그래서 프롱 간 투 프롬 과 툴을 이용해서 우리가 변형의 시작점과 변형
끝나는 단계의 속성들을 지정함으로써 그 중간 단계를 쭉 따 연결시켜서
자동으로 애니메이션 효과를 누릴 수가 있겠습니다
이게 뭐냐면 바로 키프레임 애니메이션 2조 플레이에서도 옛날에 많이 쓰던
방식이죠 이게 깊에 맹인의 전에
자 담에 메뉴들이 인데요 메뉴를 한번 살펴보도록 할게요
자 아 근데 여기 보면 네트에 오버 상태의 선택자 줘 렉 트 의 요래
트여 그닥 9 어렸을 때는 애니메이션 플레이 스테이트 라는 속성을 줍니다
자 예 를 이용해서 퍼즈 잠시 중단 시키는 거야 그래서 마우스를 올리면
잠시 중단되는 상태를 현상을 우리가 관찰할 수가 있겠습니다
그래서 애니메이션 플레이 스테이트 는 그 퍼즐을 이용해서 우리가 마우스
올렸을 때 어떻게
애니메이션을 잠시 퍼즈 시킨 거죠 중장 시키는 기능이 있을 수 있습니다
자 그 다음에 메뉴 보면 여기에 div 의 ul li 가 이게 쭉 있죠
그래서 lnb 01 02 03 005 이렇게 쭉 나오죠
자 이것들 요것들 살펴봅니다 자
lnb 로 콜 네비게이션 바다가 위드가 250 이구요
다음에 백그라운드 이렇게 되어 있습니다 그 다음에 ul li a 태그에
내가 베개에 2백 5십 에다가 높이가 55조 lsc 패서 모서리 둥근
사각형이 다 표시되어 있구요
좀 길죠 예 좀 보기 좋게 그것도 좀 드릴까요
이렇게 처리도 해줄게요
그래도 싶네요 예 자 한눈에 볼수있게 초 해줍니다
자 특별한건 없구요 폰트 웨이트 라든가 백그라운드 컬러 디스플레이
블로그로 좋았고 이렇게 하나씩 차고 처리 해 놓았구요
자 다음에 오버 여기에 중요하겠죠
liat 그 후 선택의 at 게다가 마우스를 올렸을때 상태 선택자를 영서
올렸을 때의 선택 어떻게 되는지 봅니다
올렸을 때는 애니메이션의 애니라는 tfm 이름을 쓴 돼요
얘 져 예를 쓰는데 얘는 그런 가보면 어떤 속성이 있는지
자 풀어 미니 코트 여기서 시작해서 여기서 끝나는 거죠
시작할때는 위드 값이 100 이래요 얘가 원래 갖고 뜬 사리가 100
이니까 아무런 변화 없겠죠 처음에는
자 그러다가 시간이 지나 여 투 레이 션 2초 동안
변형이 되는 속성을 좋습니다
그래서 2초 동안 리드 가루가 200으로 늘어나고 백그라운드로 컬러가
변형이 되는 거죠 이렇게 해서 마우스 올리면 이렇게 변형이 될 수가
있겠습니다
이렇게 어
자 그런데 여기서 또 새로운 소통해야 나오는데요 애니메이션이 큐레이터
카운트 한국성 있어요 이거는
반복되는 횟수를 정하는 거예요 그래서 인피니트 하면 무한반복 이에요
마우스 올려놓으면 한번 애니는 되고 또 되고
그죠 이렇게 해서 무한 반복을 하면서 그 애니메이션이 진행될 수
있겠습니다
자 아까 여기 밑에 있는거 원이 뭐 하니 그 애니메이션 되는거예요 얘는
한번에 애니는 됐다가
사실 역으로 돌아와요
지금 거는 갖다 대면은 애니원 되고 돌아온 게 아니라 처음 영화 버리죠
차이점이 있죠 자 이건 어떻게 하
댓글 0개
등록된 댓글이 없습니다.