使用CSS選擇器的動畫不起作用

Question

我的HTML：

<div id="composite-field">
        <input type='email' name='email' class='input animate' value='' placeholder='E-mail'>
        <input type='submit' id='submit' class='submit animate' value='>'>
</div>

我的CSS：

.animate { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }    

html body div.body-container form div#composite-field {
            position: relative; float: left;
            width: 80%; height: 100px; margin: 0 10%; padding: 0;
        }

        html body div.body-container form div#composite-field input[type=email] {
            float: left;
            width: 90%; height: 100px; margin: 0; padding: 0 6% 0 4%;

            border: 0; outline: none;
            -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
            background-color: #eab94e; color: rgba(26, 60, 88, 0.9);

            z-index: 10;
        }

        html body div.body-container form div#composite-field input[type=submit] {
            position: absolute; float: none; clear: both; top: 0; right: 5%;
            min-width: 80px; width: auto; height: 100px; margin: 0; padding: 0;

            border: 0; border-radius: 0; outline: none; -webkit-appearance: none;
            background-color: #2e4856; color: #eab94e;
            z-index: 11;
        }

        html body div.body-container form div#composite-field input[type=email],
        html body div.body-container form div#composite-field input[type=submit] { font-family: "Fjalla One", sans-serif; font-weight: 400; font-size: 40px; letter-spacing: normal; }

        html body div.body-container form div#composite-field input[type=email]:focus { 
            box-shadow: inset 0 0 0 5px rgba(26, 60, 88, 0.9);
        }

        html body div.body-container form div#composite-field input[type=submit]:hover { opacity: 0.5; }

現在問題出在這里，20％的寬度沒有動畫。 它曾經工作過。 而且我似乎無法弄清楚為什么現在不...

html body div.body-container form div#composite-field input[type=email]:focus ~ input[type=submit] { width: 20%; }

我的CSS是否在某處出錯？

謝謝。

Answer 1

問題是您的提交按鈕的寬度為“自動”，該寬度已轉換為80％（該寬度僅使用min-width設置）。 如果在其上設置寬度，過渡將起作用。 這是一個小提琴： http : //jsfiddle.net/znm63rky/15/

html body div.body-container form div#composite-field input[type=submit] {
    width: 80px;
}