Question

我是CSS3风格的新手。我在一些我一直在研究的网页上看到了这一点。你是否必须拥有webkit和关键帧的@ -webkit-keyframes。这两个函数看起来都有相同的名称，所以我想知道为什么它们都是必需的。是用于便携式世界的。

代码在这里：

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

所以在下面的例子中，@ -webkit-keyframes用于google和safari，@ -moz-keyframes用于firefox，然后@keyframes只是一个常规语句（所有浏览器都没有淡入时）

.myClass可以用于所有人吗？ -webkit-animation-name：fadeIn就像其他默认的fadeIn一样。或者它与上面相同，因为webkit-animation-name然后是-moz-animation-name，然后只是所有fadeIn的常规动画名称。

更有帮助的代码：

/* use of keyframes */
@-webkit-keyframes fadeIn {
    0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
    0% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes fadeIn {
    0% { opacity: 0; } 100% { opacity: 0; }
}

/* use of basic properties */
.myClass {
    -webkit-animation-name: fadeIn;
    -moz-animation-name:    fadeIn;
    animation-name:         fadeIn;
}

Answer 1

-webkit-部分称为供应商前缀。适用于基于webkit的浏览器（例如，＆＃39; Chrome＆＃39;和Safari）

供应商前缀通常在您使用的功能尚未建立的标准时使用，因此仅在少数或仅一个浏览器中可用。

通常，浏览器供应商首先使用供应商前缀发布新功能，以便Web开发人员可以开始使用它，直到标准合并并且已经建立，然后供应商发布新版本，其功能没有前缀（这是您拥有的第二个关键帧声明）

您的代码已经为浏览器开始接受未加前缀的版本做好了准备，这就是您在代码中使用两次的原因。

有什么可以参考mymove？

1 个答案: