firefox @keyframes 解决方案答案

【问题标题】：firefox @keyframes solutionfirefox @keyframes 解决方案
【发布时间】：2014-06-18 06:35:39
【问题描述】：

您好，我正在使用 css3 为占位符设置动画，我想在 webkit 导航器上运行它，但 firefox 和 ie 动画不起作用，我认为问题是 @keyframes，请各位大神帮忙解决一下？

input::-moz-placeholder {
  color: #8D8D8D;
}
input::-webkit-input-placeholder {
  color: #8D8D8D;
}
input:-ms-input-placeholder {
  color: #8D8D8D;
}

input:focus::-moz-placeholder {
animation-duration: 0.4s;
animation-name: slidein;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 0.1s;
}
input:focus::-webkit-input-placeholder {
  -webkit-animation-duration: 0.4s;
  -webkit-animation-name: slidein;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 0.1s;
}
input:focus:-ms-input-placeholder {
  opacity: 0;
}

input {
  color: black;
  padding-left: 0px;
  padding-right: 10px;
}

@-webkit-keyframes slidein {
  from {
    opacity: 1;
    padding-left: 0px;
  }

  to {
    opacity: 0;
    padding-left: 10px;
  }
}
@keyframes slidein {
  from {
    opacity: 1;
    padding-left: 0px;
    padding-right: 10px;
  }

  to {
    opacity: 0;
    padding-left: 10px;
    padding-right: 0px;
  }
}

这是现场演示http://jsfiddle.net/Cd8MG/

【问题讨论】：

没有人有解决办法？ :'(

标签： css firefox animation placeholder

【解决方案1】：

您需要@-ms-keyframes、@-moz-keyframes、@-webkit-keyframes 和@keyframes 来覆盖您的所有基础。是的，您的代码将有 10 英里长。

【讨论】：

你的意思是这样的？ jsfiddle.net/Cd8MG/2samething（注意：这仅适用于 mozilla 并且应该可以工作）并且我的代码在 chrome 和 safari + opera 上的工作方式与 acharm 类似，但在 firefox 上却不行：/
好的，首先你真的不需要关键帧。其次，Firefox 显然不允许在占位符上转换内容，这太糟糕了。但是，它仍然可以在 FF 中使用，并在更好的浏览器中进行转换：jsfiddle.net/Cd8MG/3 在此处阅读评论线程以了解其他人的经验：css-tricks.com/hang-on-placeholders

【解决方案2】：

好的，我的最终结论是：似乎没有人注意到，但在 Firefox 中，占位符属性的行为是在用户开始输入之前保留文本，至少在最新版本中是这样。 Webkit 问题的 Webkit 解决方案（或者我应该说是 -webkit 解决方案）这些天似乎不会持续很长时间。

【讨论】：