- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我使用 CSS3 transform
和 animation
功能创建了一个动画。现在我想禁止动画在 Opera 上显示。
当我删除歌剧特定代码时(@-o-keyframes leftright { 0% { left: -10%; } 100%{ left: 101%;}}
) 从 css 来看,动画不会在 Opera 上自行禁用。
但是当我删除默认动画代码时(@keyframes leftright { 0% { left: -10%; }100%{ left: 101%;}}
)它在 Opera 上会自动禁用.
我想在不删除默认代码的情况下在 Opera 上禁用它。
这是代码
@keyframes leftright { 0% { left: -10%; }100%{ left: 101%;}}
@-moz-keyframes leftright { 0% { left: -10%; } 100%{ left: 101%;}}
@-webkit-keyframes leftright { 0% { left: -10%; } 100%{ left: 101%}}
@-o-keyframes leftright { 0% { left: -10%; } 100%{ left: 101%;}}
有没有办法完成这件事?
最佳答案
首先,您应该始终将未加前缀的关键帧放在最后。
这意味着你应该:
@-moz-keyframes leftright { 0% { left: -10%; } 100%{ left: 101%;}}
@-webkit-keyframes leftright { 0% { left: -10%; } 100%{ left: 101%}}
@-o-keyframes leftright { 0% { left: -10%; } 100%{ left: 101%;}}
@keyframes leftright { 0% { left: -10%; }100%{ left: 101%;}}
回答你的问题,你描述的原因是因为 Opera 支持无前缀的关键帧动画 并且将应用它们(@keyframes leftright { 0% { left: -10%; }100%{ left: 101%;}}
),即使 Opera 特定的前缀动画( @-o-keyframes leftright { 0% { left: -10%; } 100%{ left: 101%;}}
) 丢失了。
实现您想要的最简单方法可能是 use a selector hack只针对 Opera(我只选择适用于 Opera 9.5+ 的原因是旧版本无论如何都不支持关键帧动画,无论有前缀还是无前缀)并在为该浏览器添加动画后删除动画所有浏览器。
例如,如果您有类似 <div class='boo'></div>
的内容在 HTML 中,那么你需要在你的 CSS 中有这样的东西:
.boo {
position: absolute;
width: 5em; height: 5em;
background: blue;
animation: leftright 5s linear 5; /* set animation for all browsers */
}
noindex:-o-prefocus, .boo { /* remove animation just for Opera */
animation: none;
}
(在 Opera 和其他浏览器中比较)
[请注意,我的现场演示使用的是 -prefix-free它通过 JavaScript 根据需要添加供应商前缀,并且在 您的 代码中您仍然需要为 WebKit 动画添加前缀 - 有关带/不带前缀的浏览器支持的更多信息,请始终查看 caniuse.com ]
关于css - 如何在 Opera 中禁用 css 动画关键帧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15541365/
我是一名优秀的程序员,十分优秀!