/*
Chromeのautofill検知用css（WebKit系ブラウザ限定）
jsのanimationstartイベントで使用

[背景]
autofillはjsの「input/change/focus/blur」などでは発火が保証されないため、cssアニメーションをフックとして検知

[実装方針]
- 「:-webkit-autofill」が付与/解除のタイミングで、ダミーアニメーションを開始させ、js側でanimationstartイベントを拾う
- 見た目のアニメーション目的ではない
- keyframesはイベントを発火させるためだけの空のダミーアニメーション -> keyframesが空でも「アニメーションが開始された」というイベントをjs側で拾う
- durationが0s（初期値）の場合、アニメーションは開始も終了もしないため、0.01s〜0.001s程度のdurationを指定

[注意点]
- Firefoxには「:-webkit-autofill」に相当する疑似クラスがないため未対応
- 疑似クラス「:not(:-webkit-autofill)」は初期表示時にもanimationstartが発火するが、本実装では「フォーム全体の再評価」を行うため制御は行わない
*/

@keyframes onAutoFillStart {}
@keyframes onAutoFillCancel {}

input:-webkit-autofill {
    animation-name: onAutoFillStart;
    animation-duration: 0.01s; /* animationstartを発火させるためのトリガー */
}

/* 非autofillの状態変化検知用 */
input:not(:-webkit-autofill) {
    animation-name: onAutoFillCancel;
    animation-duration: 0.01s;
}