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

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过渡和动画的区别是什么？的详细内容，更多请关注0133技术站其它相关文章！