CssTransform css3 过渡动画

定义

基于animejs封装的React组件。

图片展示

代码演示

import Anime from 'pile/dist/components/anime'
const {CssTransform} = Anime
let moveAlone = {
  targets: '.anime-move-demo-alone',
  left: '240px',
  backgroundColor: '#5EF3FB',
  borderRadius: 40,
  loop: false,
  delay: 300,
  autoplay: true,
  easing: 'easeInOutQuad'
},
moveMore = {
  targets: '.anime-move-demo',
  translateX: 250,
  direction: 'alternate',
  loop: false,
  delay: 500,
  autoplay: true,
  elasticity: (el, i, l) => {
return (200 + i * 200);
  }
}
<CssTransform {...moveAlone}>
  <div className="anime-move-demo-alone"></div>
</CssTransform>
<CssTransform {...moveMore}>
  <div className="anime-move-demo"></div>
  <div className="anime-move-demo"></div>
  <div className="anime-move-demo"></div>
</CssTransform>

属性