CODEWITHSUNDEEP
cssanimation
Zip
Zip

Reputation: 5592

Apply CSS Animation to only one div

Why is the div with id="test" being animated when I only apply animation to the div with class content?

How do I limit the animation to class "content"?

.content {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 50px 0 50px;
  flex-wrap: wrap;
  animation-name: bla;
  animation-duration: 4s;
  margin-top: 50px;
}

.item {
  color: white;
  width: 300;
  height: 300;
}

h4 {
  font-size: 24px;
  background-color: #3498DB;
  text-align: center;
}

img {
  margin-bottom: -20px;
}

@keyframes bla {
  from { margin-top: -50px }
  to { margin-top: 50px; }
}
<html>
<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="script.js"></script>
</head>
<body>
  <div class="container">
	<div class="content">
	  <div class="item">
		<img id="1" src="1.jpg">
		<h4>1</h4>
	  </div>
	  <div class="item">
		<img id="2" src="2.jpg">
		<h4>2</h4>
	  </div>
	  <div class="item">
		<img id="3" src="3.jpg">
		<h4>3</h4>
	  </div>
	</div>
  </div>	
  <div id= "test">
	<p>hello</p>
  </div>
</body>
</html>

Upvotes: 0

Views: 2836

Answers (4)

Razia sultana
Razia sultana

Reputation: 2211

Please try this code. Maybe you want something like this.

<div class="element"></div>

.element {
width: 100%; 
height: 100%; 
animation: pulse 5s infinite; 
} 

@keyframes pulse {
0% { 
background-color: #001F3F;
 }
100% {
 background-color: #FF4136
 }

 } 

html, 
 body {
height: 100%; 
 }

Upvotes: 0

Okoroafor Chukwuemeka
Okoroafor Chukwuemeka

Reputation: 152

Work with the "top" property, not the "margin-top" property. The top attribute basically defines the y-position from the top of the browser, but also depends on what is defined in the position attribute as well. The margin-top specifies the element's top gap from another element.

Upvotes: 0

Shariq Hasan Khan
Shariq Hasan Khan

Reputation: 530

Changing the margin is pushing all the elements down, including #test.Instead of animating the margin-top property, you should change the "top" (position property). So change 

  @keyframes bla {
        from {margin-top: -50px }
        to { margin-top: 50px; }
    }

to 

  @keyframes bla {
        from {top: -50px }
        to { top: 50px; }
    }


    .content{
    	display: flex;
    	flex: 1;
    	flex-direction: row;
    	justify-content: space-between;
    	margin: 0 50px 0 50px;
    	flex-wrap: wrap;
    	animation-name: bla;
    	animation-duration: 4s;
    	margin-top: 50px;
      position:relative;
    }

    .item{
    	color: white;
    	width: 300;
    	height: 300;
    }

    h4{
    	font-size: 24px;
    	background-color: #3498DB;
    	text-align: center;
    }

    img{
    	margin-bottom: -20px;
    }

    @keyframes bla {
    	from {top: -50px }
    	to { top: 50px; }
    }
    <html>
    <head>
    	<title>Test</title>
    	<link rel="stylesheet" type="text/css" href="style.css">
    	<script type="text/javascript" src="script.js"></script>
    </head>
    <body>
    	<div class="container">
    		<div class="content">
    			<div class="item">
    				<img id="1" src="1.jpg">
    				<h4>1</h4>
    			</div>
    			<div class="item">
    				<img id="2" src="2.jpg">
    				<h4>2</h4>
    			</div>
    			<div class="item">
    				<img id="3" src="3.jpg">
    				<h4>3</h4>
    			</div>
    		</div>
    	</div>	

    	<div id= "test">
    		<p>hello</p>
    	</div>
    </body>
    </html>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115045

Use a transform/translation instead of margin:

.content {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 50px 0 50px;
  flex-wrap: wrap;
  animation-name: bla;
  animation-duration: 4s;
  transform: translateY(50px);
}
.item {
  color: white;
  width: 300;
  height: 300;
}
h4 {
  font-size: 24px;
  background-color: #3498DB;
  text-align: center;
}
img {
  margin-bottom: -20px;
}
@keyframes bla {
  from {
    transform: translateY(-50px);
  }
  to {
    transform: translateY(50px);
  }
}
<html>

<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="script.js"></script>
</head>

<body>
  <div class="container">
    <div class="content">
      <div class="item">
        <img id="1" src="1.jpg">
        <h4>1</h4>
      </div>
      <div class="item">
        <img id="2" src="2.jpg">
        <h4>2</h4>
      </div>
      <div class="item">
        <img id="3" src="3.jpg">
        <h4>3</h4>
      </div>
    </div>
  </div>

  <div id="test">
    <p>hello</p>
  </div>
</body>

</html>

Upvotes: 1

Related Questions