css过渡和css动画的区别是什么？

CSS3中出现很多新的特性，其中比较好玩的3D操作就是：过渡和动画效果。那么css过渡和css动画的区别是什么？下面本篇文章就来给大家介绍一下CSS中过渡和动画的区别，希望对大家有所帮助。

css过渡和动画的区别：

animation属性类似于transition，他们都是随着时间改变元素的属性值，那么区别是什么？

其主要区别在于：transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。

1）动画不需要事件触发，过渡需要。

2）过渡只有一组（两个：开始-结束） 关键帧，动画可以设置多个。

过渡(transition)

过渡就是使瞬间的样式变化，按照一定方式变得缓慢平缓；

例如鼠标划过超链接时颜色的变化，点击按钮后的颜色变化等，默认转化都是瞬间完成，可能你已经习惯了这种变换，但有时候平缓一些看着还是比较舒适的；

要实现样式的过渡变化，那么首先就学要有样式变换，例如鼠标划过，单击按钮，点击图片等操作，来实现颜色，尺寸，位置等样式的变化；

下面是鼠标划过段落使文本变红的操作，应用所有 transition属性：

p:hover {
    color: red;
}
p {
    transition-property: color;
    transitio