css过渡与动画主要区别在于：
transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。
css过渡与动画区别总结：
1、动画不需要事件触发，过渡需要。
2、过渡只有一组（两个：开始-结束） 关键帧，动画可以设置多个。
过渡 transition
一、语法
transition: property duration timing-function delay;
默认值： all 0 ease 0
简单示例：transition: all .5s ease-in-out 1s;
transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property : 为哪些属性设置过渡效果
transition-duration : 过渡效果持续的时间
transition-timing-function : 过渡效果的速度变化
transition-delay : 延迟执行的时间
二、属性
1、过渡属性
transition-property: none | all | property;
none : 没有属性会获得过渡效果
all : 所有属性都将获得过渡效果
property : 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔
示例：
div {
background:red;
transition-property: background;
transition-duration: 2s;}
div:hover {
background:salmon;}动画 animation
一、语法
animation: name duration timing-function delay iteration-count direction;
默认值： none 0 ease 0 1 normal
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name : 要绑定到选择器的关键帧（动画）名称
animation-duration : 动画持续时间
animation-timing-function : 动画的速度变化
animation-delay : 延迟执行的时间
animation-iteration-count : 动画的播放次数
animation-direction : 动画运动的方向
二、属性
1、关键帧
2、持续时间
3、速度变化
4、延迟时间
5、播放次数
6、运动方向
以上就是css过渡和动画的区别是什么？的详细内容，更多请关注易知道|edz.cc其它相关文章！
