一、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是一个动画的效果,有多个中间帧,可以在任意一个中间帧设置状态,不需要设置触发事件就能执行。