CSS 动画

一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。

动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色

背景颜色逐渐地从红色变化到蓝色：
```css
@keyframes mymove
    {
    from {background-color:red;}
    to {background-color:blue;}
}
 
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
    from {background-color:red;}
    to {background-color:blue;}
}
```

## CSS 中的动画属性：
| 属性                         | 实例     |
|----------------------------|--------|
| background                 | [点击查看演示](http://example.itshubao.com/example/169.html "点击查看演示") |
| background-color           | [点击查看演示](http://example.itshubao.com/example/170.html "点击查看演示") |
| background-position        | [点击查看演示](http://example.itshubao.com/example/171.html "点击查看演示") |
| background-size            | [点击查看演示](http://example.itshubao.com/example/172.html "点击查看演示") |
| border                     | [点击查看演示](http://example.itshubao.com/example/173.html "点击查看演示") |
| border-bottom              | [点击查看演示](http://example.itshubao.com/example/174.html "点击查看演示") |
| border-bottom-color        | [点击查看演示](http://example.itshubao.com/example/175.html "点击查看演示") |
| border-bottom-left-radius  | [点击查看演示](http://example.itshubao.com/example/176.html "点击查看演示") |
| border-bottom-right-radius | [点击查看演示](http://example.itshubao.com/example/177.html "点击查看演示") |
| border-bottom-width        | [点击查看演示](http://example.itshubao.com/example/178.html "点击查看演示") |
| border-color               | [点击查看演示](http://example.itshubao.com/example/179.html "点击查看演示") |
| border-left                | [点击查看演示](http://example.itshubao.com/example/180.html "点击查看演示") |
| border-left-color          | [点击查看演示](http://example.itshubao.com/example/181.html "点击查看演示") |
| border-left-width          | [点击查看演示](http://example.itshubao.com/example/182.html "点击查看演示") |
| border-right               | [点击查看演示](http://example.itshubao.com/example/183.html "点击查看演示") |
| border-right-color         | [点击查看演示](http://example.itshubao.com/example/184.html "点击查看演示") |
| border-right-width         | [点击查看演示](http://example.itshubao.com/example/185.html "点击查看演示") |
| border-spacing             | [点击查看演示](http://example.itshubao.com/example/186.html "点击查看演示") |
| border-top                 | [点击查看演示](http://example.itshubao.com/example/187.html "点击查看演示") |
| border-top-color           | [点击查看演示](http://example.itshubao.com/example/188.html "点击查看演示") |
| border-top-left-radius     | [点击查看演示](http://example.itshubao.com/example/189.html "点击查看演示") |
| border-top-right-radius    | [点击查看演示](http://example.itshubao.com/example/190.html "点击查看演示") |
| border-top-width           | [点击查看演示](http://example.itshubao.com/example/191.html "点击查看演示") |
| bottom                     | [点击查看演示](http://example.itshubao.com/example/192.html "点击查看演示") |
| box-shadow                 | [点击查看演示](http://example.itshubao.com/example/193.html "点击查看演示") |
| clip                       | [点击查看演示](http://example.itshubao.com/example/194.html "点击查看演示") |
| color                      | [点击查看演示](http://example.itshubao.com/example/195.html "点击查看演示") |
| column-count               | [点击查看演示](http://example.itshubao.com/example/196.html "点击查看演示") |
| column-gap                 | [点击查看演示](http://example.itshubao.com/example/197.html "点击查看演示") |
| column-rule                | [点击查看演示](http://example.itshubao.com/example/198.html "点击查看演示") |
| column-rule-color          | [点击查看演示](http://example.itshubao.com/example/199.html "点击查看演示") |
| column-rule-width          | [点击查看演示](http://example.itshubao.com/example/200.html "点击查看演示") |
| column-width               | [点击查看演示](http://example.itshubao.com/example/201.html "点击查看演示") |
| columns                    | [点击查看演示](http://example.itshubao.com/example/202.html "点击查看演示") |
| filter                     | [点击查看演示](http://example.itshubao.com/example/203.html "点击查看演示") |
| flex                       | &nbsp; |
| flex-basis                 | [点击查看演示](http://example.itshubao.com/example/204.html "点击查看演示") |
| flex-grow                  | [点击查看演示](http://example.itshubao.com/example/205.html "点击查看演示") |
| flex-shrink                | [点击查看演示](http://example.itshubao.com/example/206.html "点击查看演示") |
| font                       | [点击查看演示](http://example.itshubao.com/example/207.html "点击查看演示") |
| font-size                  | [点击查看演示](http://example.itshubao.com/example/208.html "点击查看演示") |
| font-size-adjust           | &nbsp; |
| font-stretch               | &nbsp; |
| font-weight                | [点击查看演示](http://example.itshubao.com/example/209.html "点击查看演示") |
| height                     | [点击查看演示](http://example.itshubao.com/example/210.html "点击查看演示") |
| left                       | [点击查看演示](http://example.itshubao.com/example/211.html "点击查看演示") |
| letter-spacing             | [点击查看演示](http://example.itshubao.com/example/212.html "点击查看演示") |
| line-height                | [点击查看演示](http://example.itshubao.com/example/213.html "点击查看演示") |
| margin                     | [点击查看演示](http://example.itshubao.com/example/214.html "点击查看演示") |
| margin-bottom              | [点击查看演示](http://example.itshubao.com/example/215.html "点击查看演示") |
| margin-left                | [点击查看演示](http://example.itshubao.com/example/216.html "点击查看演示") |
| margin-right               | [点击查看演示](http://example.itshubao.com/example/217.html "点击查看演示") |
| margin-top                 | [点击查看演示](http://example.itshubao.com/example/218.html "点击查看演示") |
| max-height                 | [点击查看演示](http://example.itshubao.com/example/219.html "点击查看演示") |
| max-width                  | [点击查看演示](http://example.itshubao.com/example/220.html "点击查看演示") |
| min-height                 | [点击查看演示](http://example.itshubao.com/example/221.html "点击查看演示") |
| min-width                  | [点击查看演示](http://example.itshubao.com/example/222.html "点击查看演示") |
| opacity                    | [点击查看演示](http://example.itshubao.com/example/223.html "点击查看演示") |
| order                      | [点击查看演示](http://example.itshubao.com/example/224.html "点击查看演示") |
| outline                    | [点击查看演示](http://example.itshubao.com/example/225.html "点击查看演示") |
| outline-color              | [点击查看演示](http://example.itshubao.com/example/226.html "点击查看演示") |
| outline-offset             | [点击查看演示](http://example.itshubao.com/example/227.html "点击查看演示") |
| outline-width              | [点击查看演示](http://example.itshubao.com/example/228.html "点击查看演示") |
| padding                    | [点击查看演示](http://example.itshubao.com/example/229.html "点击查看演示") |
| padding-bottom             | [点击查看演示](http://example.itshubao.com/example/230.html "点击查看演示") |
| padding-left               | [点击查看演示](http://example.itshubao.com/example/231.html "点击查看演示") |
| padding-right              | [点击查看演示](http://example.itshubao.com/example/232.html "点击查看演示") |
| padding-top                | [点击查看演示](http://example.itshubao.com/example/233.html "点击查看演示") |
| perspective                | [点击查看演示](http://example.itshubao.com/example/234.html "点击查看演示") |
| perspective-origin         | [点击查看演示](http://example.itshubao.com/example/235.html "点击查看演示") |
| right                      | [点击查看演示](http://example.itshubao.com/example/236.html "点击查看演示") |
| text-decoration-color      | [点击查看演示](http://example.itshubao.com/example/237.html "点击查看演示") |
| text-indent                | [点击查看演示](http://example.itshubao.com/example/238.html "点击查看演示") |
| text-shadow                | [点击查看演示](http://example.itshubao.com/example/239.html "点击查看演示") |
| top                        | [点击查看演示](http://example.itshubao.com/example/240.html "点击查看演示") |
| transform                  | [点击查看演示](http://example.itshubao.com/example/241.html "点击查看演示") |
| transform-origin           | [点击查看演示](http://example.itshubao.com/example/242.html "点击查看演示") |
| vertical-align             | [点击查看演示](http://example.itshubao.com/example/243.html "点击查看演示") |
| visibility                 | &nbsp; |
| width                      | [点击查看演示](http://example.itshubao.com/example/244.html "点击查看演示") |
| word-spacing               | [点击查看演示](http://example.itshubao.com/example/245.html "点击查看演示") |
| z-index                    | [点击查看演示](http://example.itshubao.com/example/246.html "点击查看演示") |