一、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是一个动画的效果,有多个中间帧,可以在任意一个中间帧设置状态,不需要设置触发事件就能执行。
网站名称:transition和animation的区别是什么?
文章源于:https://www.cdcxhl.com/article4/dsojeie.html
成都网站建设公司_创新互联,为您提供App设计、商城网站、网站收录、网站设计公司、网站策划、域名注册
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联