ボタン入力時のFlash入力テキストボックスの背景

Question

私は入力テキストボックスとボタン要素を持っています。私は、テキストボックスの背景色をフェードインし、ボタンをクリックするだけでフェードアウトします。私はボタンのクリックでアニメーションをトリガーする方法を見つけ出すことはできません

HTML

<input type="text"> 
<button>Click</button> 

CSS

input{ 
    transition: background-color 0.1s ease-in-out 0s; 
} 
input:target{ 
    background-color: red; 
} 

。ここで

は、所望の効果

http://i.imgur.com/3CNllvP.gif

編集のGIFですもともと私はjavascriptをせずにこれを達成について尋ねたが、それは不可能であることが表示されます。

Answer 1

JSFiddleに本実施例を試してください。https://jsfiddle.net/9j826bcb/5/

私が使用しましたCSS3のアニメーションはこちら。

@keyframes highlight { 
    50% {background-color: green;} 
    100% { background-color: white; } 
} 

input { 
    outline: 0; 
} 

input.active { 
    background-color: white; 
    animation-name: highlight; 
    animation-duration: .1s; 
} 

input.final { 
    border:1px solid green; 
} 

input.final::selection { 
    background: green; 
} 

input.final::-moz-selection { 
    background: green; 
} 

また、あなたのプロジェクトのソースへのjQueryを含める必要があることに注意し、トリガーアクションを「クリック」してください：選択{背景：

$('button').on('click', function() { 
    setTimeout(function() { 
    $('input').addClass('active'); 
    }, 100); 

    $('input').removeClass('active').addClass('final').trigger('focus').select(); 
}); 

Answer 2

クラスをクリックして切り替え、そのクラスに関連付けられたanimationを使用して、フラッシュ効果を適用します。

ない、これは私のコメントでの作業が、ここではcodepenですされていない理由を確認してください - http://codepen.io/anon/pen/BpMpYe

var button = document.getElementById('button'), 
 
    input = document.getElementById('input'), 
 
    flashClass = 'flash'; 
 

 
button.addEventListener('click',function() { 
 
    input.classList.add(flashClass); 
 
}); 
 

 
input.addEventListener('animationend',function() { 
 
    this.classList.remove(flashClass); 
 
});

.flash { 
 
    animation: flash .15s; 
 
} 
 

 
@keyframes flash { 
 
    50% { 
 
    background: green; 
 
    } 
 
    100% { 
 
    background: transparent; 
 
    } 
 
}

<input id="input" type="text"> 
 
<button id="button">Click</button>