动画:定义动画关键帧方案
@keyframes
动画名{
from{}
0%{ }
……
to 100%{}
百分比表示动画播放时间
}
/*animation-name
设置动画关键帧/
名称*/
animation-name: move;
/*
动画播放时间*/
animation-duration: 2s;
/*
动画完成后的停止位置
backwards:
播放完成后回到第一个关键帧样式;
forwards:
播放完成后停在最后一个关键帧样式;
*/
animation-fill-mode: forwards;
/*
动画关键帧执行方向
指动画方案从0%
执行到100%
代表一次 normal
动画方案从100-0% reverse
0-100-0 alternate
100-0-100 alternate-reverse
*/
animation-direction: alternate-reverse;
/*
动画播放次数 infinite
无限次播放*/
animation-iteration-count: infinite;
/*
动画时间曲线方程*/
animation-timing-function: ease-in;
/*
动画延时*/
animation-delay:
/*
动画播放状态控制
running
播放
paused
暂停*/
animation-play-state: paused;
引用动画库 <link href-“animal.css”>