Article directory
1. Description of requirements
Given a sprite image, there are pictures corresponding to multiple animation frames,
The size of the image below is 1600 x 100 pixels, and the screenshot is as follows:
Actual picture :
2. Code Analysis
1. Animation properties
Use the above image to achieve frame-by-frame animation effects;
The implementation logic is to set the animation-timing-function animation attribute of the element, and use the steps(n) attribute value to specify the animation step size;
Set a box model to display the specified background image;
In the sprite above, there are 8 pictures of bears,
Set the step size of the animation to 8, each step displays a picture,
In the first step, the div box model displays the first image in the sprite image as the background image;
In the second step, the div box model displays the second picture in the sprite,
In the third step, the div box model displays the third picture in the sprite map,
The last step, which is the eighth step, the div box model displays the eighth picture in the sprite map, which is also the last picture;
2. Layout analysis
The overall size of the sprite image is 1600 x 100 pixels, and the size of each image is 200 x 100 pixels,
Here the size of the div box model is set to 200 x 100 pixels, just enough to hold the next frame of pictures;
The div box displays the sprite image as the background image, background: url(images/bear.png) no-repeat;just set the property;
The properties of the layout are as follows −
div {
/* 绝对定位 */
position: absolute;
/* 设置动画的主要作用元素 */
width: 200px;
height: 100px;
/* 设置背景图片 - 精灵图 */
background: url(images/bear.png) no-repeat;
animation: run 1s steps(8) infinite, move 4s infinite;
}
3. Realization of animation
Realization of running animation: the frame-by-frame sprite size of running is 1600 x 100 pixels, set it from left to right as the background image of the box model of 200 x 100 pixels, the position of the first frame is 0 x 0 pixels, and the last frame is displayed, You need to move the picture 1600 pixels to the left;
@keyframes run {
/* 定义奔跑动画 精灵图 切换背景动画 */
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
The animation implementation of moving from the left to the middle: directly set the absolute positioning property of the box model, the initial state is displayed on the far left, and the final state of the box model is in the middle position. It needs to move to the 50% position first. At this time, the left side of the left: 50%;box model is at the In the middle position, you need to go back 50% of yourself. Make sure to go to the middle position and set transform: translateX(-50%);the property;
@keyframes move {
/* 定义盒子模型 从左到右 的 移动动画 */
0% {
left: 0;
}
100% {
/* 绝对定位到中间位置 此时盒子模型左侧在中间位置 */
left: 50%;
/* 往回走自身的 50% 确保走到中间位置 */
transform: translateX(-50%);
}
}
3. Complete code example
Code example:
<!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>动画属性示例 - 精灵图帧动画效果实现</title>
<style>
body {
background-color: #ccc;
}
div {
/* 绝对定位 */
position: absolute;
/* 设置动画的主要作用元素 */
width: 200px;
height: 100px;
/* 设置背景图片 - 精灵图 */
background: url(images/bear.png) no-repeat;
animation: run 1s steps(8) infinite, move 4s infinite;
}
@keyframes run {
/* 定义奔跑动画 精灵图 切换背景动画 */
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
/* 定义盒子模型 从左到右 的 移动动画 */
0% {
left: 0;
}
100% {
/* 绝对定位到中间位置 此时盒子模型左侧在中间位置 */
left: 50%;
/* 往回走自身的 50% 确保走到中间位置 */
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Results of the :
