Question

动画降低h1的高度，然后在完成动画后将其捕捉回原位。

       .main-header {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
        
            animation-name: moveInLeft;
            animation-duration: 1s;
            animation-timing-function: ease-out;
        }
        
        .wrap {
            background-color: gray;
            height: 90vh;
        }
        
        
        
        @keyframes moveInLeft {
            0% {
                opacity: 0;
                transform: translateX(-100px);
            }
        
            80% {
                transform: translateX(10px);
            }
        
            100% {
                opacity: 1;
                transform: translate(0);
            }
        }

      
  <header class="wrap">  
      <h1 class="main-header">
          This is a header
      </h1>
  </header>

Answer 1

在将代码发布到此处之前，请避免不检查整个代码。

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  border: white solid 1px;
}

.header-container {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.main-nav {
  display: flex;
}

.main-nav li {
  list-style-type: none;
}

h1.main-header {
  position: absolute;
  top: 40%;
  left: 50%;
  transition: left, top;
  animation-name: moveInLeft;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

.wrap {
  background-color: gray;
  height: 90vh;
}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  60% {
    transform: translateX(150px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <title>Hello World!</title>
</head>
<body>
    
<header class="wrap">  
    <nav class="header-container">
        
        <h2 class="header-text">
            <a href="#">Text</a>
        </h2>
            
        <ul class="main-nav"> 
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        
    </nav>

    <h1 class="main-header">
        This is a header
    </h1>
</header>  

</body>
</html>

这应该可以正常工作。请注意transform: translate;和transition: left, top;的不同用法，因为transform: translate;用于将对象移动到定义的值（此处X和Y均为50％），并且您未设置返回位置以匹配起点，因此我简化了操作并使用transition: left, top;并仅更改了X的值以向右移动然后向左返回。

Answer 2

由于translate(-50% ,-50%)到来而发生的这种情况被aniamtion转换所取代。

如果您想将header居中，则可以在flex父级上使用header显示，如下所示：

.main-header {
        animation-name: moveInLeft;
        animation-duration: 1s;
        animation-timing-function: ease-out;
  animation-repeat:infinite;
      animation-iteration-count: infinite;
    }
    
    .wrap {
        background-color: gray;
        height: 90vh;
      display:flex;
      align-items:center;
      justify-content:space-around
    }
    
    
    
    @keyframes moveInLeft {
        0% {
            opacity: 0;
            transform: translateX(-100px);
        }
    
        80% {
            transform: translateX(10px);
        }
    
        100% {
            opacity: 1;
            transform: translate(0);
        }
    }

  <header class="wrap">  
        <h1 class="main-header">
            This is a header
        </h1>
    </header>  

    .main-header {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
    
        animation-name: moveInLeft;
        animation-duration: 1s;
        animation-timing-function: ease-out;
    }
    
    .wrap {
        background-color: gray;
        height: 90vh;
    }
    
    
    
    @keyframes moveInLeft {
        0% {
            opacity: 0;
            transform: translateX(-100px);
        }
    
        80% {
            transform: translateX(10px);
        }
    
        100% {
            opacity: 1;
            transform: translate(0);
        }
    }

  <header class="wrap">  
        <h1 class="main-header">
            This is a header
        </h1>
    </header>

由于您的height:90vh父级上有特定的.wrap，因此可以使用align-items:center垂直对齐标题，而justify-content可以水平align。

Answer 3

您只需要使用animation-fill-mode:forwards;检查MDN来获取属性详细信息。

       .main-header {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
        
            animation-name: moveInLeft;
            animation-duration: 1s;
            animation-timing-function: ease-out;
            animation-fill-mode:forwards;
        }
        
        .wrap {
            background-color: gray;
            height: 90vh;
        }
        
        
        
        @keyframes moveInLeft {
            0% {
                opacity: 0;
                transform: translateX(-100px);
            }
        
            80% {
                transform: translateX(10px);
            }
        
            100% {
                opacity: 1;
                transform: translate(0);
            }
        }

      
  <header class="wrap">  
      <h1 class="main-header">
          This is a header
      </h1>
  </header>

如何修复降低我的标题高度的动画？

3 个答案: