# keyframes
[개발자되기: CSS 애니메이션] Day-49
animation-name : 애니메이션 중간상태를 지정하는 이름, @keyframes 블록에 작성animation-duration : 한 싸이클의 애니메이션이 재생될 시간 지정. 지정해주지 않으면 기본값은 0animation-delay: 애니메이션의 시작을 지연시킬

[styled-components] | keyframe - animation 효과 구현
styled-components에서 제공하는 keyframes 키워드 사용원하는 애니메이션 효과를 변수로 정의하여 모듈화하고, 이를 animations 속성에 값으로 삽입하여 효과 구현transition 속성과 다르게 이벤트 없이 상시 효과가 발현될 수 있도록 구현가능
[CSS] @keyframes
CSS3 animation 속성을 사용하여 element에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜준다.애니메이션은 CSS 스타일과 애니메이션의 중간 상태를 나타내는 @keyframes으로 이루어진다. 이 키 프레임에는 요소에 적용될 CSS 스타
styled components 트랜지션/애니메이션 (Keyframes) 구현 in react : 리액트, 스타일드 컴포넌트, 트랜지션, 키프레임 : 참조
Keyframes 이용한 방법 개념 : https://agal.tistory.com/170Keyframes를 사용하지 않은 transition 코드 : https://codesandbox.io/s/yv5mm6m8qj?file=/src/index.js
Flicker animation / keframes
css effect를 적용하는 중이다. flicker 효과를 주고 싶은데 천천히 밝아지고 어두워지기를 반복한다. flicker 잖아 ... 깜빡여야 한다고...결론 먼저 keyframes 설정이 잘못 되어서 문제가 되었다. 물론 vanilla javascript에서는
[리액트 기초반] 4주차 - keyframes
animation에서 사용하는 속성 혹은 animation에 주는 규칙. 특정한 구간에서 특정한 효과를 적용하는 기능이다. 영상편집시 사용하는 키프레임과 비슷한 개념이라고 생각하자.

[CSS] @keyframes
@keyframes? 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 한다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있다.

타이핑 애니메이션 만들기 | JS Snippets
자기 소개 페이지의 리퍼런스를 찾다보니 많은 분들이 타이핑 애니메이션을 사용한 것을 볼 수 있었다. 아직 내 페이지의 구성이 결정된 건 아니지만 연습 삼아 직접 만들어보기로 했다.문서 편집기에 글을 적을 때 입력 커서가 깜빡이며 하나씩 글자가 입력되는 모습을 볼 수 있

TIL 5. CSS 애니메이션 : transition과 keyframes
Transition : we can animate a change from one state to the other. transition이라는 property는 state(ex. :hover)가 없는 element에다가 넣어야 한다.(일종의 부모 element) 그리
[CSS]loading animation
로딩화면에서 사용되어지는 360도로 반복해서 회전하는 애니메이션을 @keyframes을 이용해 만드는 것을 통해 CSS의 주요 속성중의 하나인 @keyframes의 사용법을 학습한다.
React 기초다지기 #3
keyframes: 이미 styled-components안에 포함이 되어있다.웹에서 애니메이션을 구현할 때에는 animation & transition 둘을 사용한다.Keyframes은 animation 속성중 하나이다.transition은 단순한 변화, animati

Styled-Component에서의 코드 품질 향상을 위한 고민
나는 요즘 개인프로젝트로 React UI 컴포넌트 프로젝트를 하고 있다. 프로젝트라기보다는 개인적으로 좋아하는 UI부분이기에 취미?로 하고 있다. React, TypeScript, Styled-Component를 활용한다. github: https://gith