Question

当您将鼠标悬停在CSS上时，我想为CSS生成的内容添加动画。目前它只是弹出，但我希望它从左向右滑动。我尝试添加转换但它仍然没有做任何事情。如果在CSS中不可能，我可以在jquery中进行吗？

以下是代码正在执行的操作：http://jsfiddle.net/35mtB/

HTML：

    <html>
      <head>
        <link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'>
      </head>

      <body>
        <div id="logo">
          <h1>&lt;/</h1><h1 id="text">Ja</h1><h1>&gt;</h1>
        </div>
      </body>
    </html>

CSS：

   <style>
     #logo {
       display:flex;
       align-items:center;
       width:100%;
       height:300px;
       border:2px solid #000;
     }

     h1:hover {
       cursor:pointer;
     }

     h1 {
       text-align:center;
       display:inline-block;
       font-size:50px;
       font-family:'Petit Formal Script';
       text-shadow: 0.02em 0.02em #FFFFFF,  0.05em 0.05em #33cc99;
     }

     #text:before {
       content:"";
     }

     #text:hover:after {
       content:"Wapa";
       -webkit-transition: all .4s ease-in-out;
       -moz-transition: all .4s ease-in-out;
       -o-transition: all .4s ease-in-out;
       transition: all .4s ease-in-out;
     }
   </style>

Answer 1

您实际上并未在代码中设置任何动画。

#text:after {
    content: "";
    display: inline-block;
    transform: translate3d(-250px, 0px, 0px);
}

 #text:hover:after {
   content:"Wapa";
    transform: translate3d(0px, 0px, 0px);    
   -webkit-transition: transform 3s ease-in-out;
   -moz-transition: transform 3s ease-in-out;
   -o-transition: transform 3s ease-in-out;
   transition: transform 3s ease-in-out;
 }

这是一个JSFiddle，其中列出了基础知识。您可以根据自己的需要进行自定义。

Answer 2

我建议您重新格式化HTML以便更轻松地完成此操作。您接近动画：在使用文本之后，但我遇到了对文本进行精细控制的问题。在＆＃34; Ja＆＃34;之后动画一个框。很容易，但文字比较棘手。

就此而言。重新格式化HTML将使您的HTML在SEO方面更具语义性，特别是考虑到文本包含在H1中。

考虑将此作为您的HTML代码使用，它在SEO方面在语义上更好，并且使用CSS更容易处理IMHO。

<h1 id="text">&lt;/<span class="ja">Ja</span><span class="wapa">Wapa</span>&gt;</h1>

JSFiddle

h1 span.wapa {
    width: 0;
    display: inline-block;
    transform: translate3d(-250px, 0px, 0px);    
    -webkit-transition: transform 3s ease-in-out;
    -moz-transition: transform 3s ease-in-out;
    -o-transition: transform 3s ease-in-out;
    transition: transform 3s ease-in-out;
}

h1 span.ja:hover + span.wapa {
    width: auto;
    display: inline-block;
    transform: translate3d(0px, 0px, 0px); 
}

生成的动画CSS：内容之后？

2 个答案: