CODEWITHSUNDEEP
cssanimation
gnawthatthingoffyourface
gnawthatthingoffyourface

Reputation: 37

Two animations are not occurring simultaneously although both codes work. Why?

Why aren't the two elements "arrowDiv" and "arrow" animating correctly. The image should appear as the arrow is bouncing up and down. Only one of the elements (the arrow class) animates. The Div arrowDiv is left untouched.

The picture in the background is just for context.

.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>

Upvotes: 0

Views: 37

Answers (1)

Kapeesh Manilal
Kapeesh Manilal

Reputation: 104

There is an error here. You have a full-stop after the class declaration:

.arrowDiv.{

Upvotes: 1

Related Questions