CSS 过渡语法答案

【问题标题】：CSS transition syntaxCSS 过渡语法
【发布时间】：2016-01-21 11:51:12
【问题描述】：

我正在我的样式表中创建一些过渡，并且我有这个 css，但是当我验证它here 时，我收到了有关语法的警告。

css 是这样的：

a:after {
    content: '';
    height: 2px;
    margin: 0 auto;
    display: block;
    position: relative;
    background: #b8d5e5;
    opacity: 0;
    transition: opacity .25s, -webkit-transform .25s;
    transition: opacity .25s, transform .25s;
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
}
a:hover:after {
    opacity: 1;
    transition: opacity .25s, -webkit-transform .25s;
    transition: opacity .25s, transform .25s;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
}

JsFiddle here.

它似乎工作正常 - 至少在 Chrome 中，但我需要更改什么才能修复语法？

【问题讨论】：

这些警告只是告诉你验证器不理解浏览器前缀。没什么好担心的。

标签： css css-transitions

【解决方案1】：

它们只是供应商前缀警告。你可以忽略它们。

另请参阅：How to validate vendor prefixes in CSS like -webkit- and -moz-?

【讨论】：

是的，如果动画在 chrome 中工作，那么放 -moz-transofmr 并且你可以给 -o- 和 -ms- 也可以，过渡 -webkit-transition eitc 也是如此
@Szymon Dziewoński：不，对于给定的 CSS，绝对不需要更改任何内容。特别是转换是一团糟，OP所拥有的只是所需的最低限度（加上-ms-transform）。见stackoverflow.com/questions/29806730/…
@BoltClock 我不能同意你的观点w3schools.com/css/css3_transitions.asp 你也需要在转换中使用前缀。如果他想在每个浏览器上工作，他需要添加前缀
@Szymon Dziewoński：我可能有偏见，但我不知道我是否应该感到侮辱你认为所有地方的 W3Schools 比 Stack Overflow 更可靠。跨度>