animation-name:move; 调用动画:
/* 2.调用动画 */
animation-name:move;
animation-duration: 1s;
/* animation-delay: 2s; */
/* animation-timing-function: ease-in; */
/* 动画执行的次数 */
/* animation-iteration-count: 3; */
animation-iteration-count: infinite;
/* 反转反向 */
/* animation-direction: normal; */
/* animation-direction: reverse; */
/* 正向反向交替进行 */
/* animation-direction: alternate; */
/* 反向正向交替进行 */
/* animation-direction: alternate-reverse; */
animation-play-state:paused;
@keyframes 创建动画:
第一种方式:from & to
@keyframes move {
/* 动画的初始状态 */
from{
left:0px;
top:0;
}
to{
left:300px;
top:0;
}
}
第二种方式:百分比
@keyframes move {
/* 与群组选择器一致 */
0%,100%{
left:0;
top:0;
}
25%{
left:300px;
top:0;
}
50%{
top:300px;
left:300px;
}
75%{
left:0;
top:300px;
}
}
animation-name-指定动画名称:
默认 none 规定无动画效果
@keyframes定义动画名称
animation-duratio-定义动画持续的时间:
单位:以秒或毫秒计
默认值为0,需要设置该属性,否则不会播放动画
animation-timing-function-定义动画的时间函数:
linear 匀速
ease 缓动[默认值]。动画以低速开始,然后加快,在结束前变慢。
ease-in 加速——动画以低速开始。
ease-out 减速——动画以低速结束。
ease-in-out 先加速后减速——动画以低速开始和结束。
animation-delay-定义动画开始前等待的时间:
以秒或毫秒计。
默认值是 0
允许负值,(-2s 使动画马上开始,但跳过 2 秒进入动画)
.box {
animation-name:move;
animation-duration: 5s;
animation-timing-function: ease-in;
animation-delay: -1s;
animation-iteration-count: infinite;
}
animation-iteration-count-定义动画播放次数:
1【默认值】表示1次
数值 定义动画播放次数
infifinite 规定动画应该无限次播放。
animation-iteration-count: infinite;
animation-direction-定义动画运动的方向:
normal:正常方向
reverse:反方向运行
alternate:正向反向交替—》动画先正常运行再反方向运行,并持续交替运行
alternate-reverse:反向正向交替——》 动画先反运行再正方向运行,并持续交替运行
animation-play-state-动画的执行状态:
running:运动【默认】
paused: 暂停
animation-fifill-mode-设置动画在运动时间之外的状态:
none 默认值
进场之前和动画结束之后都停留在元素的初始状态
forwards 动画结束之后停留在结束帧状态
backwards 动画进场之前停留在初始帧状态
both 以上两者
animation-简写:
语法:
animation:
动画名字 动画持续时间 动画时间函数 动画延迟时间 动画执行次数 动画的方向 动画的播放状态 填充模式
默认值:none 0 ease 0 1 normal running none
空格隔开
靠前的时间表示持续时间,靠后时间为延迟时间
多组值
以上每一个属性都允许多组值,【逗号】隔开
简写多组值:【逗号】隔开
.box {
width:100px;
height:100px;
background-color: red;
position:absolute;
left:0;
top:0;
/* animation-name:move,changebg;
animation-duration: 1s,3s;
animation-timing-function: ease-in,linear; */
animation:move 1s ease-in,changebg 3s linear;
}
/*声明动画*/
@keyframes move {
0%,100%{
left:0;
top:0;
}
25%{
left:300px;
top:0;
}
50%{
left:300px;
top:300px;
}
75%{
left:0;
top:300px;
}
}
@keyframes changebg {
0%{
background-color: red;
}
100%{
background-color: green;
}
}