export const meta = {
  title: 'Skins Animations / Themes / Docs / TACHYONS',
  subNav: 'themes',
  modules: ['tachyons-skins-pseudo'],
  editUrl: 'https://github.com/tachyons-css/tachyons/edit/master/docs/themes/skins-pseudo.md'
}

# Skins Animations

You can use any color from the `_colors.css` file to style text and background colors for hover and focus states.

## Examples

### Underline links and animate to color

To keep the default underline, but animate the color transition, combine classes from skins and skins-pseudo.

### Change text color on hover

```.html
<div class="dib w25 mr3">
<a href="#" class="link b blue db mb2 hover-black">hover-black</a>
<a href="#" class="link b black db mb2 hover-near-black">hover-near-black</a>
<a href="#" class="link b black db mb2 hover-dark-gray">hover-dark-gray</a>
<a href="#" class="link b black db mb2 hover-mid-gray">hover-mid-gray</a>
<a href="#" class="link b black db mb2 hover-gray">hover-gray</a>
<a href="#" class="link b black db mb2 hover-silver">hover-silver</a>
<a href="#" class="link b black db mb2 hover-light-silver">hover-light-silver</a>
<a href="#" class="link b black db mb2 hover-moon-gray">hover-moon-gray</a>
<a href="#" class="link b black db mb2 hover-light-gray">hover-light-gray</a>
<a href="#" class="link b black db mb2 hover-near-white">hover-near-white</a>
</div>
<div class="dib w25 mr3">
<a href="#" class="link b black db mb2 hover-white">hover-white</a>
<a href="#" class="link b black db mb2 hover-transparent">hover-transparent</a>
<a href="#" class="link b black db mb2 hover-dark-red">hover-dark-red</a>
<a href="#" class="link b black db mb2 hover-red">hover-red</a>
<a href="#" class="link b black db mb2 hover-light-red">hover-light-red</a>
<a href="#" class="link b black db mb2 hover-orange">hover-orange</a>
<a href="#" class="link b black db mb2 hover-gold">hover-gold</a>
<a href="#" class="link b black db mb2 hover-yellow">hover-yellow</a>
<a href="#" class="link b black db mb2 hover-light-yellow">hover-light-yellow</a>
</div>
<div class="dib w25 mr3">
<a href="#" class="link b black db mb2 hover-purple">hover-purple</a>
<a href="#" class="link b black db mb2 hover-light-purple">hover-light-purple</a>
<a href="#" class="link b black db mb2 hover-dark-pink">hover-dark-pink</a>
<a href="#" class="link b black db mb2 hover-hot-pink">hover-hot-pink</a>
<a href="#" class="link b black db mb2 hover-pink">hover-pink</a>
<a href="#" class="link b black db mb2 hover-light-pink">hover-light-pink</a>
<a href="#" class="link b black db mb2 hover-dark-green">hover-dark-green</a>
<a href="#" class="link b black db mb2 hover-green">hover-green</a>
<a href="#" class="link b black db mb2 hover-light-green">hover-light-green</a>
</div>
<div class="dib w25 mr3">
<a href="#" class="link b black db mb2 hover-navy">hover-navy</a>
<a href="#" class="link b black db mb2 hover-dark-blue">hover-dark-blue</a>
<a href="#" class="link b black db mb2 hover-blue">hover-blue</a>
<a href="#" class="link b black db mb2 hover-light-blue">hover-light-blue</a>
<a href="#" class="link b black db mb2 hover-lightest-blue">hover-lightest-blue</a>
<a href="#" class="link b black db mb2 hover-washed-blue">hover-washed-blue</a>
<a href="#" class="link b black db mb2 hover-washed-green">hover-washed-green</a>
<a href="#" class="link b black db mb2 hover-washed-yellow">hover-washed-yellow</a>
<a href="#" class="link b black db mb2 hover-washed-red">hover-washed-red</a>
</div>
```

### Background color transition on hover

```.html
<div class="dib w50 mr5">
<a href="#" class="link b blue pv2 db bg-animate hover-bg-black">bg-animate hover-bg-black</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-near-black">bg-animate hover-bg-near-black</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-dark-gray">bg-animate hover-bg-dark-gray</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-mid-gray">bg-animate hover-bg-mid-gray</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-gray">bg-animate hover-bg-gray</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-silver">bg-animate hover-bg-silver</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-silver">bg-animate hover-bg-light-silver</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-moon-gray">bg-animate hover-bg-moon-gray</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-gray">bg-animate hover-bg-light-gray</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-near-white">bg-animate hover-bg-near-white</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-white">bg-animate hover-bg-white</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-transparent">bg-animate hover-bg-transparent</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-dark-red">bg-animate hover-bg-dark-red</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-red">bg-animate hover-bg-red</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-red">bg-animate hover-bg-light-red</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-orange">bg-animate hover-bg-orange</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-gold">bg-animate hover-bg-gold</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-yellow">bg-animate hover-bg-yellow</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-yellow">bg-animate hover-bg-light-yellow</a>
</div>
<div class="dib w50">
<a href="#" class="link b black pv2 db bg-animate hover-bg-purple">bg-animate hover-bg-purple</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-purple">bg-animate hover-bg-light-purple</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-dark-pink">bg-animate hover-bg-dark-pink</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-hot-pink">bg-animate hover-bg-hot-pink</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-pink">bg-animate hover-bg-pink</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-pink">bg-animate hover-bg-light-pink</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-dark-green">bg-animate hover-bg-dark-green</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-green">bg-animate hover-bg-green</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-green">bg-animate hover-bg-light-green</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-navy">bg-animate hover-bg-navy</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-dark-blue">bg-animate hover-bg-dark-blue</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-blue">bg-animate hover-bg-blue</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-blue">bg-animate hover-bg-light-blue</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-lightest-blue">bg-animate hover-bg-lightest-blue</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-washed-blue">bg-animate hover-bg-washed-blue</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-washed-green">bg-animate hover-bg-washed-green</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-washed-yellow">bg-animate hover-bg-washed-yellow</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-washed-red">bg-animate hover-bg-washed-red</a>
</div>
```
