Question

当我仅将动画应用于div时，为什么id="test" div with 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>

<tr>
    <td>Start Date:<input type="date" name="d1" class="form-control" id="datepicker" /></td>
    <td>End Date:<input type="date" name="d2" class="form-control" id="datepicker" /></td>
    <?php $s = mysqli_query($connection,"SELECT * FROM tab_location");?>
    <td>Location:
        <select name="loc" class="form-control">
            <option>Select Location...</option>
            <?php while($lo = mysqli_fetch_array($s)) { ?>
                <option value="<?php echo $lo['location_name'];?>"><?php echo $lo['location_name'];?></option>
            <?php } ?>
        </select>
    </td>
    <td>Action:<input type="submit" name="sbt" class="form-control btn btn-success" value="Generate Report" /></td>
</tr>

Answer 1

使用转换/翻译而不是保证金：

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

Answer 2

更改边距会将所有元素都降低，包括#test。而不是为margin-top属性设置动画，您应该更改“top”（位置属性）。所以改变

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

到

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

Answer 3

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.

Answer 4

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%; 
 }

将CSS动画仅应用于一个div

4 个答案: