奇怪的 CSS 过渡答案

【问题标题】：Odd CSS Transitions奇怪的 CSS 过渡
【发布时间】：2012-11-28 12:26:48
【问题描述】：

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

例子：

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;
}

当我加载页面时，尺寸会随着边框一起扩大。关于问题的任何想法？

【问题讨论】：

你能重现jsfiddle.net中的问题吗？您在哪个浏览器中遇到此问题？

标签： css css-transitions

【解决方案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;
}

只有当你悬停输入时它才会激活转换。

【讨论】：