CSS3, wie man einen Knopfdruck erhält, um zu erleichtern und zu erleichtern?

Question

Ich versuche, mein Nav-bar-Header-Logo zu erhalten, um ein- und auszuklicken.

Momentan, wenn Sie auf das Logo klicken, wird das Bild richtig gelockert, aber wenn Sie es loslassen, schnappt es zurück und wird nicht wieder in die normale Größe gebracht.

Was mache ich falsch mit dem CSS3?

Dank

.navbar-brand { 
 
    height: 40px; 
 
    width: 182px; 
 
    text-indent: 100%; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    background: url('https://www.sketchappsources.com/resources/source-image/twitterlogo_1x.png') no-repeat left center; 
 
    background-size: auto 40px; 
 
    transform: scale(1, 1); 
 
    transition-timing-function: ease-in; 
 
    transition: 0.2s; 
 
    } 
 
    
 
    
 
    .navbar-brand:active { 
 
     transition-timing-function: ease-out; 
 
     transition: .5s; 
 
     transform: scale(.95, .95); 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="bd-example" data-example-id=""> 
 
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
 
    <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <a class="navbar-brand" href="#">Navbar</a> 
 

 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
 
    <ul class="navbar-nav mr-auto"> 
 
     <li class="nav-item active"> 
 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#">Link</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link disabled" href="#">Disabled</a> 
 
     </li> 
 
    </ul> 
 
    <form class="form-inline my-2 my-lg-0"> 
 
     <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
 
    </form> 
 
    </div> 
 
</nav> 
 
</div>

Answer 1

Verwenden

transition: ease-in-out all .5s

statt

transition-timing-function und transition

Im Moment kommt man nur nach, nicht raus. Sie müssen das Element in diesem Fall animieren, nicht das: active.

JSfiddle .. https://jsfiddle.net/ataue61h/2/