设定动画
1.定义动画(css)
@keyframes 动画名称{
0%{
动画开始时的样式
}
100%{
动画结尾时的样式
}
}
或者
@keyframes 动画名称{
from{
动画开始时的样式
}
to{
动画结尾时的样式
}
}
2.使用动画(css)
.类名{
animation: 动画名称 动画时长 运动曲线 延迟时间;
/* 动画名称(animation-name) */
/* 动画时长(animation-duration) */
/* 动画曲线(animation-timing-function):
linear匀速;ease慢-快-慢(默认值);
ease-in慢进快出;
ease-out快进慢出;
ease-in-out慢-快-慢 ;
steps(步数[,state|end]) 步长 start看不到第一帧 end看不到最后一帧
*/
/* 延迟时间(animation-delay) */
animation-direction: ;
/*循环方向:normal 默认值;reverse 反向运行;ternate 正-反-正;alternate-reverse 反-正-反*/
animation-iteration-count: ;
/*循环次数:infinite无限循环*/
animation-fill-mode: ;
/*
动画等待或者结束的状态:
forwards:动画结束后,元素样式停留在 100% 的样式(保留最后一帧的状态)
backwards: 在延迟等待的时间内,元素样式停留在 0% 的样式(回跳到保留第一帧时的状态)
both: 同时设置了 forwards和backwards两个属性值
*/
animation-play-state: ;
/*播放暂停设置:running 播放 paused 暂停*/
}
步长动画
文字步长动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
overflow: hidden;
width: 0px;
/* width: 240px; */
height: 30px;
line-height: 30px;
font-size: 24px;
background-color: aqua;
/*文字不换行*/
animation: ps_move 4s steps(10,start) alternate infinite forwards;
/*步长值(即步数)=p元素宽度/每个文字的大小*/
}
@keyframes ps_move{
100%{
width: 240px;
}
}
</style>
</head>
<body>
<div>一步一步是魔鬼的步伐</div>
</body>
</html>
图片步长动画
原图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 原图宽度1600px,高度100 ,8个不同状态的小熊,将图片放在box中*/
/* 即步长为8,box宽度为: 原图宽度/步长=200px*/
.box{
width: 200px;
height: 100px;
overflow: hidden;
}
.box img{
animation: imgActive 2s steps(8) infinite;
}
@keyframes imgActive{
100%{
margin-left: -1600px;
}
}
</style>
</head>
<body>
<div class="box">
<img src="./img/bear.png" alt="" />
</div>
</body>
</html>
小熊步长动画