keyframes

使用keyframes关键字，你可以创建动画序列，然后将其应用到元素上。

tsx

import { keyframes } from "flexstyled"

const frames = keyframes("mymove",{
  from:{
    opacity: 0
  },
  to:{
    opacity: 1
  }
}

然后就可以在声明animate中使用mymove了。

keyframes中也可以使用动态样式，如下：

tsx

import { keyframes } from "flexstyled"

const frames = keyframes("mymove",{
  from:{
    opacity: 0
  },
  to:{
    opacity: (props)=>props.to || 1
  }
}


const Button = styled((props,{getStyle})=>{
    // 由于keyframes用到了动态样式，所以需要传入getStyle({props})
    return <button style={getStyle(props)} />  [!code ++]  // 注入样式 
},{
  animation: `${frames} 2s linear`  // 声明动画
},[
    frames  // 组合样式
])

keyframes ​

keyframes