read : css transition vs animation : 기술 #css #transition #animation::공대여자홈

css transition vs animation

목록

작성자 공대여자

작성 : 2022-10-25 10:07 조회 : 322
지남 1일간

2022-10-25 - 2022-10-25

좌표
첨부된 파일이 없습니다.

#css #transition #animation

css transition vs animation

transition

시작과 끝만 설정함

타이밍 함수를 사용해서 중간의 진행 값을 조절 할 수 있음.

되돌리면 끝에서 시작으로 돌아감
1번만 실행
보통 :hover 등과 같이 액션에 따라 동작시킴

animation

시작과 끝 사이를 마음대로 설정 할 수 있음.

복잡한 움직임 가능

무한 반복 가능
자동 실행 가능
앞으로 뒤로 동작 방향 설정 가능

요약

둘은 거의 비슷하게도 사용할 수 있지만 기본적으로는
1. 사용자 반응에 대한 단순 변화는 transition을
2. 복잡한 동작이니 JS없는 자동 동작은 animation을
사용하면 된다.

목록

댓글

/ /
No Nickname

No Comment
권한이 없습니다.

{{m_row.m_nick}}

내용이 너무 많습니다!

-

목록형 📷 갤러리형

No	제목	작성자	등록	조회
공지	[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)	공대여자	02/06 13:44	980
공지	유용한 리눅스(LINUX) 명령어	공대여자	03/03 14:47	10570
공지	[공지] 기술 게시판	mins01	06/24 15:10	10755

일	월	화	수	목	금	토
3.31	4.1	4.2	4.3	4.4	4.5	4.6
4.7	4.8	4.9 game_tictactoe 2	4.10	4.11	4.12	4.13
4.14	4.15	4.16	4.17 :scope selector , querySelector 에서 this, self node 지정 new 1	4.18	4.19	4.20
4.21	4.22	4.23 ui_treemap new 2	4.24	4.25	4.26	4.27
4.28	4.29	4.30	5.1	5.2	5.3	5.4