CSS / JS-在两个动画中分割图像

Question

我很乐意使用CSS和JS为我的网页制作动画。我的第一个网页是由一个水平和垂直居中的图像组成的，我希望这个图像分成两个图像，一个上升，然后上下，这样我的第二个网页就出现了。我只是不知道如何将我的图像分成两部分。

我的HTML基本上是由

<div class="page1">
      <img src="img/LogoEpaissiBlanc.png" alt="Logo" id="logoindex1">
</div>

和我的CSS：

.page1 {
height: 723px;
display: table-cell;
vertical-align: middle;
}


#logoindex1{
  margin: auto;
  display: block;
width: 30%;
}

Answer 1

要做到这一点，你必须使用photoshop或类似工具将图像分成两部分，并使用css将图像保持在一起。然后添加一个过渡，使一半在一个方向上移动而另一个图像在另一个方向上移动。

这个link可能有所帮助。

Answer 2

您可以将其设置为两个divs的背景，而不是将图像分成两部分，每个background-position: lefts的大小都是整个图像的一半。左图像有background-position: right;，右图像有https://jsfiddle.net/tf45z2cy/

这是一个让你入门的小提琴：

#img-left, #img-right {
  background-image: url("http://placehold.it/100/100");
  width: 50px;
  height: 100px;
  float: left;
}
#img-right {
  background-position: right;
}

link

Answer 3

我想知道你真正想做什么，将图像分成两部分？或者两个图像一个上升，一个下降？

如果案例有两个图像，你可以访问这个

#image {
    position: relative;
	width: 200px;
}

#half-image {
   	position: absolute;
   	top: 0;
   	left: 0;
   	width: 50%;
   	overflow: hidden;
}

，在答案中，你会看到如何分割成图像，如下所示：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="image">
  <img src='https://placehold.it/200x200' id='outer' class='img-responsive'>
    <div id = "half-image">
      <img src='https://placehold.it/200/e8117f' id = 'inner'>
    </div>
</div>

animate.css

然后你需要动画你的图像移动，你可以使用here到你的图像。在GitHub上查看源代码README。在

#left {
  position: absolute;
  float: left;
}

#right {
  float: right;
}
    

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  -moz-animation-name: fadeOutDown;
  animation-delay: 2s;
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  -moz-animation-name: fadeOutUp;
  animation-delay: 2s;
}

文件中，他解释了如何使用它！

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css">

<div id="left">
	<img src='https://cdn.abranhe.com/stackoverflow/48027310/left.png' class="animated fadeOutDown" >
	<div id = "right">
		<img src='https://cdn.abranhe.com/stackoverflow/48027310/right.png'  class="animated fadeOutUp" >
	</div>
</div>

qazxswpoi