#29-网站Tips动起来!用Tailwind自订动画&Hover动画～

今天玩玩时下最夯的Tailwind啦～
把这30天的文章＆Demo收集起来变成一个30天的汇整网站！

(原定要写的Three.js改成Tailwind动画，因为three.js的水实在太深啦！)

我将这30天用到的程序语言设计成标签，
点击标签就可以筛选下方的文章，
但因为和传统的筛选样式不同，
所以想要做一个动态箭头，指引使用者点击。
老样子先来看成果！

（请忽略我奇怪的英文 XD）

箭头会一直动，直到使用者点击了标签就会消失。
另外一个动态是Hover之後标题会动，
就来看一下我是怎麽用Tailwind做设定吧！

大纲：
1.Tailwind 自订CSS Animation
2.Tailwind 增加Hover变数设定Animation

然後，对，我就是在写铁人赛的同时入了兔兔教
这一篇不会讲Tailwind起手式喔！详细请参考：
排版神器 Tailwind CSS～和兔兔一起快速上手漂亮的元件开发！

自订动态：在Tailwind Config档案设定

Tailwind动画支援有限，所以我们自己在 tailwind.config.js
里面自己做设定：

module.exports = {
  theme: {
    extend: {
		//在keyframes设定想要的动态
      keyframes: {
        //这个就是我们的箭头动态啦往右上一直指
        point: {
          '0%': {top: '-0.25rem',left: '-1.25rem'},
          '100%': {top: '-0.5rem',left: '-1.5rem'},
        }
       },
		//这边是我们的animation命名
       animation: {
        point: 'point 0.6s linear infinite',
       },
    },
  },
}

命名完成後就来想要家的地方把名称加上去！
只要 animate-你取的名称 就会吃设定档案罗！

<!-- animate-point 就是我们要的动态啦！ -->
<div>
<span class="animate-point">&#8598</span>
     Click to filter articles</div>

自订Hover动态

我想要标题这边在Hover的时加上动态，(才有动起来的感觉！)

先看一下成果：

tailwind的class也有hover:，直接帮元素写上hover後想要的变化
但只内建了backgroundColor、skew、rotate可以使用，
这时候一样在config档案，为animte加上变数，也可以一起套用啦！

//tailwind.config.js
module.exports = {
  theme: {
    extend: {
    //这边是我的晃动动态
      keyframes: {
        shake: {
          '0%': {transform: 'translateX(-5%)'},
          '25%': {transform: 'translateX(5%)'},
          '50%': {transform: 'translateX(-5%)'},
          '75%': {transform: 'translateX(5%)'},
          '100%': {transform: 'translateX(-5%)'},
        }
       },
       animation: {
        shake: 'shake 0.3s linear 1',
       },
    },
  },
  //变数加在这边
  variants: {
    extend: {
      animation: ['hover'],
    },
  },
}

再帮我们的DOM元素加上类别hover:animate-自订名称 就好啦！

<div class="hover:animate-shake cursor-pointer">
    <h1>Shake it up!</h1>
            
</div>

以上！

这次我用 Gulp 去做打包＆压缩，
下一篇会一起分享在Gulp里Tailwind的设定喔！
所谓下一篇就是最後一篇啦！今天晚一点放上来～