虽然两个代码都有效，但两个动画并没有同时发生。为什么？

Question

为什么两个元素“arrowDiv”和“arrow”没有正确动画。当箭头上下弹跳时，图像应该出现。只有一个元素（箭头类）动画。 Div arrowDiv保持不变。

背景中的图片仅供上下文使用。

.animatedSection {
    width:100%;
    height: 540px;
  overflow-x: hidden;
  overflow-y: hidden;
}

.allpics {
  position: relative;
  top: -30px;
  left: 20%;
  width: 100%;
  height: 100%;
  animation-name: slideDiagonalAll;
  animation-iteration-count: 1;
  animation-duration: 2s;
  animation-timing-function: ease;
  transform: rotate(-15deg) scaleY(1) skewX(30deg);
  animation-delay: 2s;

.arrowDiv.{
	position: absolute;
	left:450px;
	top:200px;
	z-index: 100;
	height: 500px;
	width: 500px;
	background-color: black;
	animation-name: arrowDown;
	animation-iteration-count: infinite;
	animation-duration: 2s;
	animation-timing-function: ease;
	animation-direction: alternate;
	/* animation-fill-mode: backwards; /*check if forwards*/
}

.arrow{
	z-index: inherit;
	animation-name: appear;
	animation-iteration-count:1;
	animation-duration:5s;
	animation-timing-function: linear;
	animation-delay: 4s;

	-webkit-filter: drop-shadow(-15px 10px 5px rgba(0,0,0,0.7));
    filter: drop-shadow(-15px 10px 5px rgba(0,0,0,0.7));
}
  
@keyframes slideDiagonalAll {
  0% {
    transform: translate(150px, 150px) rotate(-15deg) scaleY(1) skewX(30deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(-15deg) scaleY(1) skewX(30deg);
  }
}  

@keyframes arrowDown{
	0% {
		transform: translate(0px, 0px);
	}
	100% {
		transform: translate(0px, 10px);
	}
}  
  
@keyframes appear{
	0% {opacity: 0;}
	100% {opacity: 1;}
}  

<div class="animatedSection">
  <div class="allpics">
  	<div class="arrowDiv">
  		<img class="arrow" src="http://i.imgur.com/o4Y1QK5.png?1">
  	</div>
    <img class="pic1" src="http://i.imgur.com/LO7Wtdy.jpg"/>
  </div>
</div>

Answer 1

这里有一个错误。你在课堂宣言后有一个句号：

.arrowDiv.{