반응형 css애니메이션2 [css]animista로 keyframes animation 빠르게 적용(jello, wobble,bounce 등) 사이트를 만들다 보면 애니메이션 처리하는 게 생각보다 귀찮고 구상하기가 번거로울때가 많다. 그럴 때 손쉽게 쓸 수 있는게 animista!! animista에서는 애니메이션에 관련된 여러가지 셋팅값들을 가져다 쓸 수 있다. UI도 심플해서 조금만 만져보면 쉽게 파악할 수 있을 듯. 좌측에 다양한 셋팅을 만져보면 중앙에 요소의 움직임을 바꿔볼 수 있고 이 셋팅값이 맘에 든다고 하면 우측에 중괄호{}로 되어 있는 아이콘을 클릭한다. 클릭하면 아래와 같이 팝업창이 나온다. 전부다 css로 되어 있어서 만지기가 훨씬 수월하고 간단하다. 축약형을 원한다면 minify을 클릭해서 코드를 사용하고, 벤더프리픽스 형태로도 가능하다. 애니메이션 처리 뿐만 아니라 text-shadow, 움직이는 backgroud grad.. 2022. 8. 3. [라이브러리] 간단하게 css로 animate 적용하는 Bounce.js css로 animation 처리를 할 수 있지만, 부드럽고 자연스럽게 넣는 게 생각보다 어려웠다. 특히나 아기자기한 느낌을 내고 싶을 때, 젤리형태나 바운스된 느낌을 넣고 싶을때는 ease나 cubic-bezier로 커스텀 한다고 할지라도 한계가 있었다. 그래서 찾아본 결과 css만으로도 애니메이션 효과를 넣을 수 있는 bounejs 사이트를 알게 됐다. 사용해보니까 굳이 js를 거치지 않고 써도 되는건데 왜 이름이 bounejs인지 모르겠넹 ㅇ_ㅇ....(코알못) 일단 사이트진입 ㄱㄱ 왼쪽이 효과를 선택할 수 있는 부분이고, 중앙이 미리보기와 소스를 가져갈 수 있는 형태로 되어 있는 듯하다. 애니메이션 효과 적용 왼쪽에 select preset을 누르면 기본적으로 셋팅되어 있는 다양한 효과들을 볼 수 .. 2022. 5. 10. 이전 1 다음 반응형
