阅读模式:

transition和animation的区别是什么?

阅读量:17  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:一、transition(过渡、转变的意思)transition 属性是一个简写属性,用于设置四个过渡属性:1. transition-property:设置过渡效果的属性名称(默认值是all);2. transition-duration......

transition和animation的区别是什么?

一、transition(过渡、转变的意思)

transition 属性是一个简写属性,用于设置四个过渡属性:

1. transition-property:设置过渡效果的属性名称(默认值是all);

2. transition-duration:设置过渡完成所需要的时间(默认值是0);

3. transition-timing-function:设置过渡速度效果曲线(默认值是ease);

4. transition-delay:设置过渡的开始时间(默认值是0);

语法:transition: property duration timing-function delay;

注意:这里transition-duration是需要填的,不填默认为是0,没有过渡效果。

二、animation(动画、活力的意思)

animation 属性也是一个简写属性,用于设置六个动画属性:

1. animation-name:设置绑定到选择器的@keyframem名称(默认值是none);

2. animation-duration:设置完成动画所花费的时间(默认值是0);

3. animation-timing-function:设置动画的速度曲线(默认值是ease);

4. animation-delay:设置动画延迟几秒开始(默认值是0);

5. animation-iteration-count:设置动画播放的次数(默认值是1);

6. animation-direction:设置时候轮流反向播放动画(默认值是normal);

语法:animation: name duration timing-function delay iteration-count direction;

注意:这里animation-duration是需要填的,不填默认是0,就不会播放动画了。

三、区别

1. transition是一个过渡的效果,没有中间状态,需要设置触发事件(如hover等)才能执行;

2. animation是一个动画的效果,有多个中间帧,可以在任意一个中间帧设置状态,不需要设置触发事件就能执行。

分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: