html中过渡效果是什么,css过渡和动画的区别是什么？

animation属性类似于transition，他们都是随着时间改变元素的属性值，但他们之间是有一些区别的，下面我们来看一下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、运动方向