# 애니모션 - 시각적 CSS 애니메이션 앱

> Clean Markdown view of GeekNews topic #12029. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=12029](https://news.hada.io/topic?id=12029)
- GeekNews Markdown: [https://news.hada.io/topic/12029.md](https://news.hada.io/topic/12029.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2023-11-26T09:49:45+09:00
- Updated: 2023-11-26T09:49:45+09:00
- Original source: [cssanimotion.pages.dev](https://cssanimotion.pages.dev/)
- Points: 4
- Comments: 1

## Topic Body

### CSS 애니메이션 노코드 생성

- Animotion은 드래그, 크기 조정, 회전, 클리핑 등을 통해 시각적으로 CSS 애니메이션을 생성할 수 있는 도구임.
- 키프레임 편집기와 사용할 준비가 된 애니메이션 모음, 29개의 내장 이징(easings)을 제공함.
- 이 앱은 큰 화면과 최신 웹 브라우저에서 더 잘 작동함.

### GN⁺의 의견

- 이 기사에서 가장 중요한 것은 Animotion이라는 도구를 통해 코드를 작성하지 않고도 CSS 애니메이션을 쉽게 만들 수 있다는 점임.
- 소프트웨어 엔지니어링에 관심 있는 사람들에게 흥미로울 수 있으며, 특히 프론트엔드 개발에 관심이 있는 초급 개발자들에게 매력적인 내용임.

## Comments



### Comment 20902

- Author: neo
- Created: 2023-11-26T09:49:46+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=38402776) 
- CSS3가 1999년에 출시되었고, 2023년에 이런 앱이 해커뉴스에 소개될 만큼 멋지다는 것은, 키 프레임 기반 애니메이션의 접근성과 프로그래밍 가능성이 크게 개선되지 않았음을 보여줌. 플래시는 약 10년 전에 사라졌고, Adobe Animate와 여러 평범한 프레임워크 및 커뮤니티가 남아 있음. 견고한 CSS/SVG 기반 애니메이션은 대부분 빈약한 약속으로 남아 있음.
- 키 프레임을 이동하는 것이 첫 번째로 하고 싶었던 일이지만, 아직 그 기능이 없음.
- 앱의 결과물이 CSS로 나오는 것이 마음에 들며, 라이브러리에 얽매이지 않은 자바스크립트 코드가 아님에 감사함.
- 에디터의 직관성이 마음에 들고, 좀 더 고급 타임라인이 필요한 사람들은 Theatre.js를 확인해보는 것이 좋음. 웹 플랫폼에서 더 많은 움직임을 보게 되어 기쁨.
- 모바일에서 아이콘이 무엇을 의미하는지 알려주는 툴팁이나 힌트를 제공하는 좋은 방법이 있는지 궁금함. 몇몇 아이콘의 기능을 이해할 수 없으며, 실행해볼 수는 있지만 앞서 언급한 것처럼 되돌리기 기능이 없음.
- 이 앱을 매우 좋아함.
- 앱의 소스 코드는 GitHub에서 확인 가능함: [animotionjs/animotion](https://github.com/animotionjs/animotion)
- 모바일에서도 놀랍도록 직관적인 사용성을 제공함.
- 놀라운 작업이며, 매우 멋진 도구를 공유해줘서 감사함.
- 모바일에서도 훌륭하게 작동하며, 북마크할 가치가 있음.