CSS中的变形都是一瞬间完成的事情,而不是一个动画过程。
动画transition
需要函数,动作触发
transition-property
all所有的属性都可以发生
left只对left属性做变化,只有left发生变化时才有动画效果。
transition-property transition-property样例
transition-duration过渡效果持续时间
transition-duration transition_duration样例transition-timing-function定义时间函数
ease默认,两头慢中间快
linear线性,匀速
ease-in开始慢
ease-out结束慢
ease-in-out开始结束都慢,相对于ease两头幅度更大
cubic-bezier (num,num,num,num)bezier曲线
step-start
step-end
steps 几步,在start变化还是end变化
image.png
transition-delay
设置延时的时间,可以设置一个和多个
transition-delay transition-delay样例
transition
transition transition样例动画animation
animation可以不使用hover等js触发,直接运行
animation-name
animation-name animation-name样例animation-duration动画执行的时间
animation-durationanimation-timing-function
animation-timing-functionanimation-iteration-count执行次数
animation-iteration-counanimation-direction动画方向
animation-directionanimation-play-state动画状态
动画状态是暂停还是运动,可以结合hover使用,鼠标移上去的时候,动画是动还是暂停。
running
paused
animation-delay
动画延时
animation-delay
animation-fill-mode
backwards动画在开始的时候是否要保持第一帧的状态,
forward结束的时候保持结束的状态
both开始的时候保持第一帧的状态,结束的时候保持结束的状态。
animation
所有属性在一起
animation animation样例关键帧@keyframes
@keyframes abc {
from {opacity:1; height:100px;}
to {opacity:0.5; height:200px;}
}
@keyframes abc {
0% {opacity:1; height:100px;}
100% {opacity:0.5; height:200px;}
}
from to 可以写成0%和100%
@keyframe flash{
0%,50%,100%{opacity:1;}
25%,75% {opacity:0;}
}
flash会产生闪动效果
需要调用
keyframe keyframe关键帧样例
网友评论