CSS中的动画

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-duration

animation-timing-function

animation-timing-function

animation-iteration-count执行次数

animation-iteration-coun

animation-direction动画方向

animation-direction

animation-play-state动画状态

动画状态是暂停还是运动，可以结合hover使用，鼠标移上去的时候，动画是动还是暂停。
running
paused

animation-play-state

animation-delay

动画延时

animation-delay

animation-fill-mode

backwards动画在开始的时候是否要保持第一帧的状态，
forward结束的时候保持结束的状态
both开始的时候保持第一帧的状态，结束的时候保持结束的状态。

animation-fill-mode

animation-fill-mode样例

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关键帧样例