CSS3过渡
特点:
(1)本质上是一帧动画,一帧结束后,就没有然后了…..
(2)过渡的效果的实现,必须要通过用户的行为,可能触发 行为:hover,focus,click,JS代码。
1、transition的属性
transition-property:指定元素的过渡属性
transition-duration: 规定了过渡的时间
transition-timing-function: 规定以何种方式过渡
ease:表示的是快速
ease-in :表示的是先慢后快
ease-out:表示的是先快后慢
linear:线性平缓的变换
step(num):规定过渡分几步完成。num只能是正值。
transition-delay: 规定延迟多少时间进行
ttransition-property: transform;
transition-duration: 1.5s;
transition-timing-function: steps(5);
transition-delay: 1s;
transition: transform 1.5s linear;//简写
2、缩写
transition: property duration timing-function delay;
transition: transform 5s ease-in-out 1s;
3、触发过渡
只有当用户触发事件,过渡事件才能进行,比如用户点击、鼠标移入移出等等,这是它的一个局限性。
4、局限性
CSS3动画
1、animation动画属性
animation-name:取值为动画名称;
animation-duration:规定动画完成所需时间
animation-timing-function: 规定以什么方式完成动画;
animation-delay: 规定动画延迟多久执行;
animation-iteration-count: 规定动画执行的次数(infinite 无限循环)
animation-direction: 规定动画执行的方向(alternate 规定动画来回执行);
animation-play-state: 规定动画的运行与暂停,默认值为running(运行);paused表示暂停。
animation-fill-mode: 规定动画开始之前和结束之后发生的操作,默认值为none,另外的两个是forwards表示动画结束后元素保留最后的状态;backwards则与forwards相反。
animation-name: move;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 1s;
animation-direction: alternate;
animation-play-state: running;
animation-iteration-count: infinite;
animation: move 1s linear infinite;//缩写
2、@keyframes
规定一个动画,包括动画名称,
form规定初始状态,to规定动画的末状态
@keyframes move {
from{
transform: translate(0);
}
to{
transform: translate(600px,120px);
}
}
0%也可以表示初始状态,100%也可以表示动画的末状态。
@keyframes move {
0% {
transform: translate(0, 0);
}
50% {
transform: scale(0.5);
}
60% {
transform: rotate(50deg);
}
100% {
transform: translate(500);
}
}