今天让同学做一个简单的动画，发现她不知道从何入手，所以写篇文章说一下
错误：
1.不知如何下手
（1）应该知道状态位置 和 结束状态位置
（2）应该知道动画 和 过度的初识 和 结束属性一致
2.不知道如何用单一属性让盒子居右
3.动画的初始和结束属性不一致 ，导致动画没反应
目录
扫描二维码关注公众号，回复：
13227390 查看本文章
1.盒子垂直居中
父盒子相对定位，子盒子绝对定位,距离上边50%
position: absolute;
top: 50%;但是位置还没有居中，还要上去盒子高度的一半，有两种方式
（1）绝对定位
根据 calc( ) 动态计算
transform: translateY(-50%);（2）transform: translateY
2D平移自身的一半高度 单位%的高度是相对于自身
transform: translateY(-50%);（3）margin——不推荐使用（所以就不写了）
2.盒子距离浏览器左边100px
父盒子相对定位，子盒子绝对定位，距离左边100px
（1）绝对定位
left: 100px;（2）transform: translateX（不方便只用平移进行右边计算）
3.让盒子距离浏览器右边100px
父盒子相对定位，子盒子绝对定位，距离右边100px
（1）绝对定位
但是因为动画的初始状态css属性，和标签的初识状态css属性，和动画状态结束属性一致
所以不用right
right: 100px;根据 calc( ) 动态计算 先让盒子跑到最右边在减去盒子自身（宽度+100px)
left: calc(100% - 200px);或者加上平移，单位%的宽度是相对于自身
left: calc(100% - 200px);
transform: translateX(-100%);（3）.把居左和居右加给动画初识状态和结束状态
@keyframes move {
0% {
left: 100px;
background-color: darksalmon;
}
100% {
left: calc(100% - 200px);
background-color: dodgerblue;
}
}全部代码：
<!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;
}
section {
width: 100%;
height: 900px;
background-color: lightblue;
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 100px;
animation: move 5s linear 0s infinite alternate forwards;
}
@keyframes move {
0% {
left: 100px;
background-color: darksalmon;
}
100% {
left: calc(100% - 200px);
background-color: dodgerblue;
}
}
</style>
</head>
<body>
<section>
<div class="box"></div>
</section>
</body>
</html>