如何在页面加载时制作动画以重新排列某些元素到其原始位置？

Question

我在制作动画时遇到了一些麻烦： 我需要的是，当页面加载时，图标必须略微超出其原始位置。 所以：

1. 在页面加载时，图标比原始位置高5px。
2. 触发动画以将图标重新排列到其原始位置（删除高5px）。

这是我到目前为止的代码：

＆＃13;
＆＃13;
var outerBox = $('.eight-box'),
    boxHeight = $(outerBox).height(),
    boxWidth = $(outerBox).width();
function changeNumbers() {
  var pos1 = $('.pos-1'),
      pos2 = $('.pos-2'),
      pos3 = $('.pos-3'),
      pos4 = $('.pos-4'),
      pos5 = $('.pos-5'),
      pos6 = $('.pos-6'),
      pos7 = $('.pos-7'),
      pos8 = $('.pos-8'),
      pos9 = $('.pos-9'),
      pos10 = $('.pos-10'),
      pos11 = $('.pos-11'),
      pos12 = $('.pos-12'),
      pos13 = $('.pos-13'),
      pos14 = $('.pos-14'),
      pos15 = $('.pos-15');
};
＆＃13;
.eight-box {
	position: relative;
	display: block;
	margin: 1em auto;
	width: 16em;
	height: 24em;
  font-family: sans-serif;
  font-size: 20px;
}
.fig-8 {
	display: block;
	position: absolute;
	color: #fff;
	width: 2em;
  height: 2em;
  line-height: 2;
  text-align: center;
  font-weight: bold;
  font-smoothing: antialiased;
	transition: all .5s linear;
  overflow: hidden;
  z-index: 5;
}
.fig-8:before {
  display: block;
  content: '';
  background: rgba(0,0,0,.15);
/*  box-shadow: 0 0 .25em 0 rgba(0,0,0,.2), inset 0 0 2px rgba(0,0,0,.25);*/
  width: .65em;
  height: .65em;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.fig-8:after {
  content: '';
  width: 2em;
  height: 2em;
  background: #fff;
  transform: rotate(45deg);
  z-index: 20;
  position: absolute;
  top: -1.4em;
  left: -1.4em;
}
.col-1 {
	background: #1abc9c;
}
.col-2 {
	background: #9b59b6;
}
.col-3 {
	background: #27ae60;
}
.col-4 {
	background: #2c3e50;
}
.col-5 {
	background: #e74c3c;
}
.col-6 {
	background: #f39c12;
}
.col-7 {
	background: #bdc3c7;
}
.col-8 {
	background: #2ecc71;
}
.col-9 {
	background: #34495e;
}
.col-10 {
	background: #2980b9;
}
.col-11 {
	background: #f1c40f;
}
.col-12 {
	background: #d35400;
}
.col-13 {
	background: #7f8c8d;
}
.col-14 {
	background: #3498db;
}
.col-15 {
	background: #16a085;
}
.pos-1 {
	top: 0;
	left: 43.75%;
}
.pos-2 {
	top: 6.25%;
	left: 68.75%;
}
.pos-3 {
	top: 22.92%;
	left: 78.125%;
}
.pos-4 {
	top: 39.58%;
	left: 68.75%;
}
.pos-5 {
	top: 45.83%;
	left: 43.75%;
}
.pos-6 {
	top: 52.08%;
	left: 18.75%;
}
.pos-7 {
	top: 68.75%;
	left: 9.375%;
}
.pos-8 {
	top: 85.417%;
	left: 18.75%;
}
.pos-9 {
	top: 91.67%;
	left: 43.75%;
}
.pos-10 {
	top: 85.417%;
	left: 68.75%;
}
.pos-11 {
	top: 68.75%;
	left: 78.125%;
}
.pos-12 {
	top: 52.08%;
	left: 68.75%;
}
.pos-13 {
	top: 39.58%;
	left: 18.75%;
}
.pos-14 {
	top: 22.92%;
	left: 9.375%;
}
.pos-15 {
	top: 6.25%;
	left: 18.75%;
}
.smile {
  position: absolute;
  width: 2em;
  height: 2em;
  line-height: 1.8;
  transform: rotate(90deg);
  text-align: center;
  border-radius: 50%;
/*  box-shadow: inset 0 0 0 2px #333;*/
  background: moccasin;
}
.smile-1 {
  top: 22.92%;
  left: 43.75%;
}
.smile-2 {
  top: 68.75%;
  left: 43.75%;
}

.eight-box {
	position: relative;
	display: block;
	margin: 1em auto;
	width: 16em;
	height: 24em;
  font-family: sans-serif;
  font-size: 20px;
}
.fig-8 {
	display: block;
	position: absolute;
	color: #fff;
	width: 2em;
  height: 2em;
  line-height: 2;
  text-align: center;
  font-weight: bold;
  font-smoothing: antialiased;
	transition: all .5s linear;
  overflow: hidden;
  z-index: 5;
}
.fig-8:before {
  display: block;
  content: '';
  background: rgba(0,0,0,.15);
/*  box-shadow: 0 0 .25em 0 rgba(0,0,0,.2), inset 0 0 2px rgba(0,0,0,.25);*/
  width: .65em;
  height: .65em;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.fig-8:after {
  content: '';
  width: 2em;
  height: 2em;
  background: #fff;
  transform: rotate(45deg);
  z-index: 20;
  position: absolute;
  top: -1.4em;
  left: -1.4em;
}
.col-1 {
	background: #1abc9c;
}
.col-2 {
	background: #9b59b6;
}
.col-3 {
	background: #27ae60;
}
.col-4 {
	background: #2c3e50;
}
.col-5 {
	background: #e74c3c;
}
.col-6 {
	background: #f39c12;
}
.col-7 {
	background: #bdc3c7;
}
.col-8 {
	background: #2ecc71;
}
.col-9 {
	background: #34495e;
}
.col-10 {
	background: #2980b9;
}
.col-11 {
	background: #f1c40f;
}
.col-12 {
	background: #d35400;
}
.col-13 {
	background: #7f8c8d;
}
.col-14 {
	background: #3498db;
}
.col-15 {
	background: #16a085;
}
.pos-1 {
	top: 0;
	left: 43.75%;
}
.pos-2 {
	top: 6.25%;
	left: 68.75%;
}
.pos-3 {
	top: 22.92%;
	left: 78.125%;
}
.pos-4 {
	top: 39.58%;
	left: 68.75%;
}
.pos-5 {
	top: 45.83%;
	left: 43.75%;
}
.pos-6 {
	top: 52.08%;
	left: 18.75%;
}
.pos-7 {
	top: 68.75%;
	left: 9.375%;
}
.pos-8 {
	top: 85.417%;
	left: 18.75%;
}
.pos-9 {
	top: 91.67%;
	left: 43.75%;
}
.pos-10 {
	top: 85.417%;
	left: 68.75%;
}
.pos-11 {
	top: 68.75%;
	left: 78.125%;
}
.pos-12 {
	top: 52.08%;
	left: 68.75%;
}
.pos-13 {
	top: 39.58%;
	left: 18.75%;
}
.pos-14 {
	top: 22.92%;
	left: 9.375%;
}
.pos-15 {
	top: 6.25%;
	left: 18.75%;
}
.smile {
  position: absolute;
  width: 2em;
  height: 2em;
  line-height: 1.8;
  transform: rotate(90deg);
  text-align: center;
  border-radius: 50%;
/*  box-shadow: inset 0 0 0 2px #333;*/
  background: moccasin;
}
.smile-1 {
  top: 22.92%;
  left: 43.75%;
}
.smile-2 {
  top: 68.75%;
  left: 43.75%;
}

.fig-8 {
    animation: pulse-special 1s 1s infinite alternate backwards;
    border-radius: 50%;
}
@-webkit-keyframes pulse-special {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(0, 115, 207, .9);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(0, 115, 207, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(0, 115, 207, 0);
    }
}
@keyframes pulse-special {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(0, 115, 207, .9);
        box-shadow: 0 0 0 0 rgba(0, 115, 207, .9);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(0, 115, 207, 0);
        box-shadow: 0 0 0 10px rgba(0, 115, 207, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(0, 115, 207, 0);
        box-shadow: 0 0 0 0 rgba(0, 115, 207, 0);
    }
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="eight-box">
  <div class="fig-8 col-1 pos-1">1</div>
  <div class="fig-8 col-2 pos-2">2</div>
  <div class="fig-8 col-3 pos-3">3</div>
  <div class="fig-8 col-4 pos-4">4</div>
  <div class="fig-8 col-5 pos-5">5</div>
  <div class="fig-8 col-6 pos-6">6</div>
  <div class="fig-8 col-7 pos-7">7</div>
  <div class="fig-8 col-8 pos-8">8</div>
  <div class="fig-8 col-9 pos-9">9</div>
  <div class="fig-8 col-10 pos-10">10</div>
  <div class="fig-8 col-11 pos-11">11</div>
  <div class="fig-8 col-12 pos-12">12</div>
  <div class="fig-8 col-13 pos-13">13</div>
  <div class="fig-8 col-14 pos-14">14</div>
  <div class="fig-8 col-15 pos-15">15</div>
  <div class="smile smile-1">: )</div>
  <div class="smile smile-2">: )</div>
</div>
＆＃13;
＆＃13;
＆＃13;

你有什么建议？

Answer 1

我不确定我是否理解，但你只需要一个能够在所有元素上移动它们的动画。如：

＆＃13;

＆＃13;

div {
  animation: moveDown 1s;
}

@keyframes moveDown {
  from {  margin-top: -5px  }
  to {  margin-top: 0  }
}

＆＃13;

<div>Some text</div>

＆＃13;

＆＃13;

＆＃13;