ANIMATION3 애니메이션 - 텍스트 가 그려지는 효과 SVG Text Animation SVG 를 이용한 애니메이션을 만들어 보았습니다. See the Pen Text Animation by hmm365 (@hmm365) on CodePen. html viewBox 는 svg 요소의 크기를 확대 또는 축소 그리고 위치를 조정할 수 있는 속성 입니다. viewBox 속성을 이용하면 화면에 크기에 따라 svg 요소의 크기가 자동으로 조절 됩니다. (viewBox="min-x min-y width height") 요소는 텍스트로 구성된 그래픽 요소를 그립니다. () text = x='50%' y='50%' , text-anchor='middle' 으로 텍스트 를 중간 정렬을 한것입니다. 코드 보기 SyuMay css stroke-dashoffset 은 strok.. 2022. 9. 8. 애니메이션 - Animation Steps | 움직이는 이미지 CSS Animation Steps gif 파일의 프레임을 풀어서 하나의 이미지로 만든후 값을 지정하여 움직이는 애니메이션 효과를 만들었습니다. See the Pen stepAni by hmm365 (@hmm365) on CodePen. html step 클래스는 이미지를 넣을 stepbox 가 넘치지 않도록 영역을 잡아준후 stepbox 에 이미지를 넣습니다. 코드 보기 Start Stop css stepbox 에 해당하는 이미지크기를 원하는대로 조정한후 background 를 이용하여 프레임을 해체한 이미지를 불러옵니다. 여기서 중요한점은 크기를 조정한 결과에 따라 이미지 속도라 달라진다는것을 확인할수있습니다. 따라서 저는 원본이미지크기가 1600 / 1200 사이즈이므로 3배를 줄여 animatio.. 2022. 9. 7. 애니메이션 - CSS Intro animation animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션 끝.. 2022. 9. 7. 이전 1 다음 728x90 반응형
