Question

我有一个应用于我的表单的动画，我希望它在淡入时从屏幕顶部下拉。

我有淡入淡出的属性设置，它就像一个魅力，但现在我需要它从顶部滑入。我还需要先让我的桌子出现。我想让它流行。我该怎么做？

这是我的表单CSS：

@keyframes fadeIn{
    from {opacity: 0;}
    to {opacity: 1;}
}


form {
  margin-bottom: 1em;
    animation-name: fadeIn;
    animation-duration: 2s;}

这是我的表CSS：

table{
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    width: 330px;
    white-space: 5px;}


table {border-collapse: collapse;}

tr:nth-of-type(odd) {
    background-color: #aaa;
}

tr:nth-of-type(even) {
    background-color: #ccc;}



table caption{
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-left:1px solid black;
    background-color: #999;
    color: black;
    font-weight: bold;
    font-variant: small-caps;}

对此的任何帮助都会很棒！再次感谢！

以下是我所拥有的所有HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/project4.css" type="text/css">
<title>SylviaGunter WEB-210 Project 4</title>
</head>

<body>

<form action="process.php">
<h1>Registration</h1>
<ol>
    <li>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
    </li>
    <li>
        <label for="email">Email:</label>
        <input class="required" type="text" id="email" name="email">
    </li>
    <li>
        <label for="pass">Password:</label>
        <input  class="required" type="password" id="pass" name="pass">
    </li>
    <li>
        <input type="submit" value="Register">
    </li>
</ol>
</form>

<table>
<caption>Last five new registrants</caption>
    <tr>
        <th>Name</th>
        <th>Date Joined</th>
    </tr>
    <tr>
        <td>Aaron Aaronson</td>
        <td>1/1/14</td>
    </tr>
    <tr>
        <td>Becky Beckinson</td>
        <td>1/1/14</td>
    </tr>
    <tr>
        <td>Charlie Charleson</td>
        <td>1/1/14</td>
    </tr>   
    <tr>
        <td>Devon Devons</td>
        <td>1/1/14</td>
    </tr>   
    <tr>
        <td>Edward Edwards</td>
        <td>1/1/14</td>
    </tr>
</table>
</body>
</html>

Answer 1

被修改

我认为你需要。

  @keyframes fadeIn{
     from {opacity: 0; top: -400px;}
     to {opacity: 1; top: 0;}
  }
  form {
      position: relative;
  }

这里是你编辑过的小提琴：

https://jsfiddle.net/s57rsxd9/1/

Answer 2

嗨，因为你想要创建下拉效果，所以在动画中你首先需要给你想要开始和结束的位置，我认为这两个参数将按你想要的方式运行，请查看

所以你可以通过

获得

＆＃13;

 @keyframes fadeIn{
     from {opacity: 0; top: 0;}
     to {opacity: 1; top: 100%;}
  }

＆＃13;

从屏幕上掉下来？

2 个答案:

被修改