음악, 삶, 개발
animate.css : 남이 만들어놓은 css 애니메이션 클래스들 본문
< 공식 문서 >
Animate.css | A cross-browser library of CSS animations.
Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
animate.style
www.npmjs.com/package/animate.css?activeTab=versions
npm i animate.css< 용도와 사용법 >
animate.css 는 다른 개발자가 만들어놓은 css 의 애니메이션 클래스 모음이다.
내가 직접 애니메이션을 만들어내는것도 좋지만, 이 라이브러리를 사용하면
매우 편리하게 미리 만들어놓은 프리셋들을 사용할수있다.
사용법은 아래와 같다.
<template>
<div
class=
" animate__animated
animated__bounce "
></div>
</template>
<script>
import 'animate.css'
export default {
}
</script>
<style scoped>
/* 전체 애니메이션명에 적용 */
.animate__animated {
--animate-duration : 500ms;
--animate-delay : 0;
}
/* 해당 요소에만 적용 */
#my-element {
--animate-duration: 0.5s;
}
</style>animate.css 를 import 한뒤에,
먼저 animate__animated 클래스가 반드시 포함해되어야한다.
그다음 animated__애니메이션명 클래스를 추가한다.
가능한 애니메이션명은 총 100가지 정도가있으며,
공식 사이트에 가면 애니메이션명 하나하나를 실행해볼수있으니 참조하기를 바란다.
--animation-duration 속성을 사용하면, 해당 요소에 각각 다르게 duration 을 줄수있다.
< 유지 보수 >
npm 에서 20만 다운로드를 넘은 매우 인기있는 라이브러리이다.
역사는 굉장히 오래되었다.
2013년에 시작되어..
2020년 9월까지 업데이트 되었다.
믿고 사용해도 된다.
< 예제 코드 >
<template>
<div
class ="animate__animated"
:class ="'animate__' + state.selectedAnimation"
v-text ="state.selectedAnimation"
></div>
</template>
<script>
import 'animate.css'
import { reactive, onMounted } from 'vue'
export default {
setup() {
/* animate.css 의 클래스명 */
// 앞에 'animate__' prefix 하여야함!
// 거의 100개!
const animations = [
'bounce',
'flash',
'pulse',
'rubberBand',
'shakeX',
'shakeY',
'headShake',
'swing',
'tada',
'wobble',
'jello',
'heartBeat',
'backInDown',
'backInLeft',
'backInRight',
'backInUp',
'backOutDown',
'backOutLeft',
'backOutUp',
'bounceIn',
'bounceInDown',
'bounceInLeft',
'bounceInRight',
'bounceInUp',
'bounceOut',
'bounceOutDown',
'bounceOutLeft',
'bounceOutRight',
'bounceOutUp',
'fadeIn',
'fadeInDown',
'fadeInDownBig',
'fadeInLeft',
'fadeInLeftBig',
'fadeInRight',
'fadeInRightBig',
'fadeInUp',
'fadeInUpBig',
'fadeInTopLeft',
'fadeInTopRight',
'fadeInBottomLeft',
'fadeInBottomRight',
'fadeOut',
'fadeOutDown',
'fadeOutDownBig',
'fadeOutLeft',
'fadeOutLeftBig',
'fadeOutRight',
'fadeOutRightBig',
'fadeOutUp',
'fadeOutUpBig',
'fadeOutTopLeft',
'fadeOutTopRight',
'fadeOutBottomRight',
'fadeOutBottomLeft',
'flip',
'flipInX',
'flipInY',
'flipOutX',
'flipOutY',
'lightSpeedInRight',
'lightSpeedInLeft',
'lightSpeedOutRight',
'lightSpeedOutLeft',
'rotateIn',
'rotateInDownLeft',
'rotateInDownRight',
'rotateInUpLeft',
'rotateInUpRight',
'rotateOut',
'rotateOutDownLeft',
'rotateOutDownRight',
'rotateOutUpLeft',
'rotateOutUpRight',
'hinge',
'jackinTheBox',
'rollin',
'rollOut',
'zoomIn',
'zoomInDown',
'zoomInLeft',
'zoomInRight',
'zoomInUp',
'zoomOut',
'zoomOutDown',
'zoomOutLeft',
'zoomOutRight',
'zoomOutUp',
'slideInDown',
'slideInLeft',
'slideInRight',
'slideInUp',
'slideOutDown',
'slideOutLeft',
'slideOutRight',
'slideOutUp'
]
const state = reactive({ selectedAnimation : animations[0] })
onMounted(() => {
let index = 0
setInterval(() => {
++index
if (index == animations.length) index = 0
state.selectedAnimation = animations[index]
}, 700)
})
return { state }
}
}
</script>
<style scoped>
div {
position : absolute;
left : 50px;
top : 50px;
width : 100px;
height : 100px;
background-color : rgb(75, 62, 186);
display : flex;
justify-content : center;
align-items : center;
font-size : 10px;
color : cornsilk;
}
.animate__animated {
--animate-duration : 500ms;
--animate-delay : 0;
}
</style>
