动画定义
与动画相比,过渡,需要触发,而且效果相对比较单调,动画可以实现更细粒度的控制和更丰富的效果。
定义动画:
采用如下语法
定义一个名为 move_right 的动画
@keyframes move_right {
0% {
margin-left: 0;
}
100% {
margin-left: 500px;
}
}
0% 也可以写作 from
100%也可写作 to
动画调用
基本调用
在相应的元素上调用这个动画
div{
width: 200px;
height: 200px;
background-color: #ee20ee;
/*动画名称 必需*/
animation-name: move_right;
/*播放一边所需时间 必需*/
animation-duration: 5s;
}
支持的参数
属性 | 说明 |
---|---|
animation-name | 动画名称 |
animation-duration | 播放一次所需时间 s/ms |
animation-timing-function | 速度曲线() |
animation-delay | 动画开始播放延迟时间 s/ms |
animation-iteration-count | 播放次数(infinite:表示一直循环播放) |
animation-direction | 下一次是否逆向播放(normal:从头开始播放;alternate:逆向播放) |
animation-play-state | 设置动画状态(running:正在播放,打开页面就处于播放状态,paused暂停播放,打开页面不自动播放) |
animation-fill-mode | 播放完成是否回到初始位置(forwards:停在结束位置;backwards:回到原点) |
简写属性
除了animation-play-state属性,其他可以简写。
ainimation: 名称 周期 速率曲线 延迟 次数 是否逆向 结束停留位置
除了 周期和延迟有先后顺序,其他属性顺序不固定
示例
盒子沿四个角移动
div {
width: 200px;
height: 200px;
background-color: #ff6700;
animation: move 4s;
}
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0);
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0px, 500px);
}
100% {
transform: translate(0px, 0px);
}
}
模拟熊动图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>熊跑</title>
<style>
.b {
position: absolute;
top: 528px;
left: 0;
width: 200px;
height: 100px;
background: url("img/bear.png");
animation: run 1s steps(8) infinite forwards, b_run 3s linear forwards;
}
.m1 {
position: relative;
margin-top: 300px;
width: 3840px;
height: 336px;
background: url("img/bg1.png") repeat-x 0px 100px;
animation: bg1_mv 10s linear infinite backwards;
}
.m2 {
position: absolute;
top: 60px;
width: 3840px;
height: 569px;
background: url("img/bg2.png") repeat-x 0px 100px;
animation: bg1_mv 20s linear infinite forwards;
}
@keyframes run {
0% {
}
100% {
background-position: -1600px 0;
}
}
@keyframes b_run {
0% {
}
100% {
left: 50%;
transform: translate(-50%);
}
}
@keyframes bg1_mv {
0% {
}
100% {
background-position: -3840px 0;
}
}
</style>
</head>
<body>
<div class="m2"></div>
<div class="m1"></div>
<div class="b"></div>
</body>
</html>