Question

我正在制作我的第一个网站并被卡住了。在页面加载我有动画（元素下降到位）但我也有：悬停比例在其中。因此动画现在可以正常运行，但是当我悬停它时它不会扩展。我正在寻找的结果是页面加载元素下降然后当你将它们悬停在它们上时它们会向上扩展。

top-header h1 {
    text-transform: capitalize;
    color:white;
    font-weight: 700;
    text-shadow: 10px 15px 10px rgba(0,0,0,0.6);
    transition: transform, scale 2s;
    transform: translateY(-80px);
    animation: come-in 2s;
    animation-fill-mode: forwards;
}

top-header h1:hover {
    transform: scale(1.05);
}

@keyframes come-in {
    to {transform: translateY(0);}
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width-device-width,initial-scale=1">
        <title>Li-designs</title>
        <meta name="description" content="Ignas Levinskas is young designer and web developer.">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"?>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway:200,400,600,800" rel="stylesheet">
    </head>
    <body>
        
        <header>
            <div class="overlay">
                <top-header>
                    <h1>Ignas Levinskas</h1>
                    <social-header>
                     <ul>
                         <li><a href="https://www.facebook.com/Ignasbelenkacia" target="_blank"><i class="fa fa-facebook" style="color:white" aria-hidden="true"> </i></a></li>
                         <li><a href="https://www.instagram.com/burn_them_with_fire/" target="_blank"><i class="fa fa-instagram" style="color:white" aria-hidden="true"> </i></a></li>
                         <li><a href="https://www.behance.net/li-designs" target="_blank"><i class="fa fa-behance" style="color:white" aria-hidden="true">   </i></a></li>
                     </ul>
                    </social-header>
                </top-header>
                <cover-content>
                    <h1>Welcome</h1>
                    <img src="images/logo.png" alt="Ignas Levinskas designs logo">
                </cover-content>
            </div>
        </header>
    <main>
            
    </main>
        
    </body>
    
</html>

Answer 1

您已将规则列入错误的类别。

我已经像这样重新排列了它们：

top-header h1 {
    text-transform: capitalize;
    color:white;
    font-weight: 700;
    text-shadow: 10px 15px 10px rgba(0,0,0,0.6);
    animation: come-in 2s;
}

top-header h1:hover {
    transform: scale(1.05);
    transition: scale 2s;
    animation-fill-mode: forwards;
}

@keyframes come-in {
    from {transform: translateY(-80px);}
    to {transform: translateY(0);}
}

Answer 2

element：hover中使用的任何属性也应该存在于元素中，以便在悬停时可以更改该属性。

这是你最后的CSS。

top-header h1 {
    text-transform: capitalize;
    color:white;
    font-weight: 700;
    text-shadow: 10px 15px 10px rgba(0,0,0,0.6);
    animation: come-in 2s;
}

top-header h1:hover {
    transform: scale(2);
    transform-origin: top left;
}

@keyframes come-in {
  from { transform: translateY(-80px) scale(1);}
    to {transform: translateY(0) scale(1);}
}

以及codepen https://codepen.io/fearless23/pen/QgRMgb

的工作示例

Answer 3

top-header h1 {
    animation-fill-mode: forwards;<---------------Remove
    transform: translateY(-80px);<---------------Remove
    //more code
}

@keyframes come-in {
   from { transform: translateY(-80px);} <------------Added
   to {transform: translateY(0);}
}

top-header h1 {
  text-transform: capitalize;
  color:red;
  font-weight: 700;
  text-shadow: 10px 15px 10px rgba(0,0,0,0.6);
  transition: transform, scale 2s;
  animation: come-in 2s;
}

top-header h1:hover {
  transform: scale(1.05);
}

@keyframes come-in {
  from {transform: translateY(-80px);}
  to {transform: translateY(0);}
}

top-header h1:hover {
  transform: scale(1.5);
  padding-left: 100px;
}

@keyframes come-in {
  from { transform: translateY(-80px);}
  to {transform: translateY(0);}
}

<header>
  <div class="overlay">
    <top-header class="x">
      <h1>Ignas Levinskas</h1>
      <social-header>
      <ul>
         <li><a href="https://www.facebook.com/Ignasbelenkacia" target="_blank"><i class="fa fa-facebook" style="color:white" aria-hidden="true"> </i></a></li>
          <li><a href="https://www.instagram.com/burn_them_with_fire/" target="_blank"><i class="fa fa-instagram" style="color:white" aria-hidden="true"> </i></a></li>
          <li><a href="https://www.behance.net/li-designs" target="_blank"><i class="fa fa-behance" style="color:white" aria-hidden="true">   </i></a></li>
      </ul>
      </social-header>
    </top-header>
  <cover-content>
  <h1>Welcome</h1>
  <img src="images/logo.png" alt="Ignas Levinskas designs logo">
   </cover-content>
  </div>
</header>
<main>
</main>

带有关键帧和悬停的CSS动画

3 个答案: