728x90 반응형 keyframe2 비주얼 스튜디오 코드_75 animation 한 글자씩 애니메이션 적용 html markup article > div > h2안에 span 사이에 한 글자씩 넣기 article 6까지 마크업한다. css 편집 #header css edit transiton : all 은 모두 움직이는 속도를 주지만 움직이고 싶은 명령어만 지정해서 속도를 넣을 수 있다. #dot edit @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } ol,li,ul,dd,dt,dl{ list-style: none; } a{ text-decoration: none; } .clearfix::before, .clearfix::after{ display: block; content: ""; clear: both.. 2023. 7. 12. 비주얼 스튜디오 코드 32 _ 베지에곡선 사용하기 ● cubic-bezier https://cubic-bezier.com/#.17,.67,.83,.67 cubic-bezier.com cubic-bezier.com 베지에 곡선을 이용해서 이벤트 속도를 조절할 수가 있다. 선 화면 중앙에 보내기 애니메이션 주기 ●animation : bar 2s ease-in-out infinite; bar : 애니메이션 이름 2s : 수행시간 ease-in-out : 수행시간 동안 빠르기를 조절해주는 명령어 infinite : 수행할 갯수 ( 무한정) ● @keyframes : 움직이는 값을 줄때 사용한다. 선이 제자리에서 움직인다. 0%에서 bar 높이값이 0, 회전 0 에서 시작 25%에서 진행속도 대신에 베지에 곡선을 이용해서 속도를 조절할 수 있다. ● cubic.. 2023. 6. 14. 이전 1 다음 728x90
