メニューが押されているときにアニメーションを適用する方法

Question

私は4つのメニュー要素を持っていて、それらの言語の隣に、右から左に移動してメニューを押す言語にカーソルを合わせます。そのプッシュに滑らかなアニメーション効果を適用する方法は？私が何を意味するのかを明確に理解できるように、下のリンクを確認してください。

HTML：

<ul class="nav navbar-nav navbar-right"> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="#">Materials</a></li> 
      <li><a class="active" href="portfolio.html">Portfolio</a></li> 
      <li><a href="contact.html">Contacts</a></li> 
       <span class="lang"> 
       <li><a href="#">EN</a></li> 
         <li><a href="#">DE</a></li> 
         <li><a href="#">RU</a></li> 
       </span> 

     </ul> 

CSS：

@keyframes languageIn { 
    0% { transform: translateX(100%); opacity:0; } 
    100% { transform: translateX(0); opacity:1; } 

} 

.navbar-nav a { 
    line-height: 40px !important; 
    position:relative; 
} 

.navbar-nav li > a:hover, 
.navbar-nav li > a:active { 
    transition: .5s ease-in-out; 
    color: #ff0000 !important; 
} 

.navbar-nav a::after { 
    content: ''; 
    display: block; 
    width: 0; 
    height: 2px; 
    background: #ff0000; 
    transition: width .3s; 
} 

.navbar-nav a:focus::after:not(.lang li a) { 
    width: 100%; 
} 

.navbar-nav a.active::after { 
    display: block; 
    width: 100%; 
    height: 2px; 
    background: #ff0000; 
    transition: width .3s; 
} 

.nav > li > a { 
    padding:0px; 
} 
.nav li { 
    padding-right:40px; 
} 

.lang li { 
    font-size: 14px; 
    display: inline-block; 
    padding-left: 7px; 
    animation: goIn .5s ease-out; 
} 

.lang li:not(:last-child) { 
    display:none; 
} 

.lang:hover li:not(:last-child) { 
    display:inline-block; 
    animation: languageIn .5s ease-in-out; 
} 

ここでは、完全なコードは次のとおりです。 https://codepen.io/anon/pen/dRzxmR

Answer 1

私はあなたのコードを少し微調整し、今それが動作します。 幅で再生し、アニメーションではなくトランジションを使用します。

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing:border-box; 
 
} 
 
a { 
 
    text-decoration: none !important; 
 
    color: #222222; 
 
} 
 
a:hover { 
 
    color: #ff0000; 
 
    cursor: pointer; 
 
} 
 

 
html,body { 
 
    color: #191818; 
 
    font-size: 14px; 
 
    font-family: "Museo Sans Cyrl 100", sans-serif; 
 
    animation: fadein 4.5s 
 
    height: 100%; 
 
} 
 
/* Animate on Loading page*/ 
 
@keyframes fadein { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 

 

 

 
.navbar-default { 
 
    z-index:99; 
 
    font-size: 14px; 
 
    background-color: rgba(248,248,248,.6); 
 
} 
 

 
.navbar-nav a { 
 
    line-height: 40px !important; 
 
    position:relative; 
 
    /*top:20px;*/ 
 
} 
 

 
.navbar-nav li > a:hover, 
 
.navbar-nav li > a:active { 
 
    transition: .5s ease-in-out; 
 
    color: #ff0000 !important; 
 
} 
 

 

 
.navbar-nav a::after { 
 
    content: ''; 
 
    display: block; 
 
    width: 0; 
 
    height: 2px; 
 
    background: #ff0000; 
 
    transition: width .3s; 
 
} 
 

 
.navbar-nav a:focus::after:not(.lang li a) { 
 
    width: 100%; 
 
} 
 

 
.navbar-nav a.active::after { 
 
    display: block; 
 
    width: 100%; 
 
    height: 2px; 
 
    background: #ff0000; 
 
    transition: width .3s; 
 
} 
 

 
.navbar-nav .active { 
 
    color: #ff0000 !important; 
 
} 
 

 
.nav > li > a { 
 
\t padding:0px; 
 
} 
 
.nav li { 
 
\t padding-right:40px; 
 
} 
 

 
.logo-block { 
 
    margin-left: 120px; 
 
} 
 
.logo-block h1 { 
 
    color: #1b1a18; 
 
    font-size: 22px; 
 
} 
 
.logo { 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: transparent; 
 
    border-radius: 50%; 
 
    border: 3px solid red; 
 
    float: left; 
 
} 
 
.fixed { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    opacity: 1; 
 
} 
 
.nav-palceholder { 
 
    margin: 0 0 20px 0; 
 
} 
 
.navbar-brand h5{ 
 
    font-weight: 900; 
 
    margin: 1px 0px 0px 0; 
 
    padding: 0 0 0 50px; 
 
    font-size: 17px; 
 
} 
 
.navbar-collapse{ 
 
    width: 100%; 
 
} 
 

 

 
/* PLACE WHERE LANGUAGE CONFIGURES */ 
 

 
.lang li { 
 
    font-size: 14px; 
 
    display: inline-block; 
 
    padding-left: 7px; 
 
    animation: goIn .5s ease-out; 
 
} 
 

 
.lang li:not(:last-child) { 
 
    transform: translateX(100%); opacity:0; width: 0; 
 
    display: inline-block; 
 
    transition: .5s ease-in-out; 
 
} 
 

 
.lang:hover li:not(:last-child) { 
 
    transform: translateX(0); opacity:1; width: 2em; 
 
} 
 

 
.lang li a { 
 
\t color: #ff0000; 
 
} 
 
span.lang li { 
 
    padding-right: 0px !important; 
 
} 
 

 

 

 
/*nav fix*/ 
 
.navbar { 
 
    border-radius: 0px !important; 
 
} 
 
.navbar-default { 
 
    border-color: transparent !important; 
 
} 
 
span.lang li { 
 
    padding-right: 0px !important; 
 
} 
 
.navbar-padding{ 
 
    padding: 15px 0 !important; 
 
}

<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <title>logo style</title> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
\t <link rel="stylesheet" href="css/main.css"> 
 
</head> 
 
<body> 
 
\t 
 
\t 
 
<header id="header"> 
 

 
<nav class="navbar navbar-default"> 
 
\t \t <div class="container"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class=""> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
<a href="#" class="navbar-brand col-xs-7 col-sm-6 col-md-6"> 
 

 
\t \t \t \t \t <div class="logo"></div> 
 
\t \t \t \t \t <h5>Logo<br> style</h5> 
 
\t \t \t \t \t <div class="clear"></div> 
 

 
     </a> 
 
     <div class="clear"></div> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse navbar-padding" id="bs-example-navbar-collapse-1 "> 
 
     
 
     <ul class="nav navbar-nav navbar-right"> 
 
     \t \t <li><a href="index.html">Home</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#">Materials</a></li> 
 
\t \t \t \t \t \t \t <li><a class="active" href="portfolio.html">Portfolio</a></li> 
 
\t \t \t \t \t \t \t <li><a href="contact.html">Contacts</a></li> 
 
\t \t \t \t <span class="lang"> 
 
\t \t  \t <li><a href="#">EN</a></li> 
 
\t \t \t \t \t \t <li><a href="#">DE</a></li> 
 
\t \t \t \t \t \t <li><a href="#">RU</a></li> 
 
\t \t \t \t </span> 
 

 
     </ul> 
 

 

 

 
    </div><!-- navbar-collapse --> 
 
\t </div><!--Container--> 
 
</nav> 
 
\t \t 
 
</header> 
 

 

 

 

 

 
<script src="js/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
</body> 
 
</html>

https://codepen.io/anon/pen/gRGYNb