奇怪的 CSS 过渡

Question

每当我尝试创建一个过渡时，样式都会淡入元素，而不仅仅是在悬停时（示例）。我真的不知道问题是什么，也不知道从哪里开始寻找解决这个问题。

例：

input[type='text'] {
    transition:.15s all;
    -webkit-transition:.15s all;
    -moz-transition:.15s all;
    border: 1px solid #DEDEDE;
    border-radius: 5px;
    color: #545454;
    font-size: 15px;
    padding: 4px;
    margin-bottom: 6px;
}

当我加载页面时，大小会随着边框而扩展。关于问题是什么的任何想法？

Answer 1

这里的问题是，您将过渡设置为默认值。如果你这样做：

input[type='text'] {
   border: 1px solid #DEDEDE;
   border-radius: 5px;
   color: #545454;
   font-size: 15px;
   padding: 4px;
   margin-bottom: 6px;
}
input[type='text']:hover {
   transition:.15s all;
   -webkit-transition:.15s all;
   -moz-transition:.15s all;
   font-size: 17px;
   color: black;
}

仅当您将鼠标悬停在输入上时，它才会激活过渡。