tailwind中的转换和动画

缩放

scale-[num]
scale-x-[num]
scale-y-[num]
    num为一个可以为小数的数字
    为1表示无缩放效果

旋转

rotate-[angle]
    angle为一个包含单位deg的角度值
    rotate-[25deg]

位移

translate-x-[*]
translate-y-[*]

翻转

skew-x-[angle]
skew-y-[angle]

转换中心

自定义： origin-[x_y]
    x，y表示原点的坐标，可以为带单位的长度值，也可以是百分数

origin-[keyword]  ：设置转换时的相对中心，默认为元素的中心
    center   top   bottom   left   right
    top-left       top-right
    bottom-left    bottom-right

动画属性

设置哪些属性的变化应用到动画上

transition-none         transition-all
transition              transition-colors
transition-opacity      transition-shadow
transition-transform

一般我们使用transition足够覆盖常用的属性变化

动画硬件加速

transform-gpu    强制使用gpu
transform-cpu    改为默认值cpu

动画时长

设置动画属性时默认就设置了动画时长150ms

duration-[time] ：time为一个带单位的时长值

动画效果

ease-[cubic-bezier(<x1>, <y1>, <x2>, <y2>)]
    自定义贝塞尔运动曲线

ease-linear     全程匀速
ease-in         慢速开始，之后匀速
ease-out        匀速开始，慢速结束
ease-in-out     慢速开始和结束

动画延迟

delay-[time] ：time为一个带单位的时长值

动画设置

由于动画比较复杂，tailwind为我们预设的集中常用动画

animate-spin    旋转
animate-ping    水波纹样子的缩放和淡入淡出
animate-pulse   逐渐淡入和淡出
animate-bounce  上下弹跳

自定义动画

通过修改配置文件tailwind.config.js添加动画名称和动画设置

添加动画名称

module.exports = {
  theme: {
    extend: {
      keyframes: {
        kfname: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        }
      }
    }
  }
}

动画设置

module.exports = {
  theme: {
    extend: {
      animation: {
        'atname': 'kfname 3s linear infinite',
      }
    }
  }
}

项目使用

<div class="animate-atname">...</div>

任意值

<div class="animate-[kfname_1s_ease-in-out_infinite]">...</div>