css - 奇怪的 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;
}

如果您将输入悬停，它只会激活转换。