transition是过渡属性 用于设置四个过渡属性
- transition-property 规定设置过渡效果的 CSS 属性的名称。
- transition-duration 规定完成过渡效果需要多少秒或毫秒。
- transition-timing-function 规定速度效果的速度曲线。
- transition-delay 定义过渡效果何时开始。
会有宽度变化过度效果,时间是2s
#test {
width: 100px;
height: 100px;
background-color: cyan;
transition: width 2s linear;
}
#test:hover {
width: 300px;
height: 100px;
}
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
- 旋转:transform:rotate(-45deg);
- 缩放:transform:scale(.5); scaleX(2); scaleY(3)。如果给了负值,能够达到翻转的效果:scaleX(-1)
- 移动:transform: translate(1px,2px)
- 倾斜:transform:skew(45deg,0);
animation 属性是一个简写属性,用于设置六个动画属性:
- animation-name 规定需要绑定到选择器的 keyframe 名称
- animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
- animation-timing-function 规定动画的速度曲线。
- animation-delay 规定在动画开始之前的延迟。
- animation-iteration-count 规定动画应该播放的次数。
- animation-direction 规定是否应该轮流反向播放动画。
创建animation动画有两个步骤
1.定义动画:主要指定义关键帧
@keyframes fadeIn{
from{
opacity:0;
},
to{
opacity:1;
}
}
2.将动画应用到元素上
.nav-button{
animation-name:fadeIn;
animation-duration:1s;
animation-timing-function:ease-out,
animation-delay:.5s;
animation-iteration-count:infinite;
animation-direction:alternate
}
区别transition
transition只能从一组css属性变成另一组css属性。animation则可以在多组属性之间变换。
transition必须使用触发器触发,animation可以使用触发器,也可以在页面加载完成的时候自动触发。