【问题标题】:keyframe animation transform not running in chrome关键帧动画转换未在 chrome 中运行
【发布时间】:2015-06-27 20:23:03
【问题描述】:

以下内容似乎适用于 Firefox 和 Safari,甚至 IE!但在 Chrome 中不是

(在 Firefox 和 IE 中有效,但如果你在 Chrome 中打开它,你什么也看不到!)

@keyframes animationFrames{
  0% {
    transform:  translate(-402px,55px)  ;
  }
  4% {
    transform:  translate(-333px,26px)  ;
  }
  9% {
    transform:  translate(-257px,-13px)  ;
  }
  14% {

【问题讨论】:

    标签: css google-chrome css-animations


    【解决方案1】:

    那是因为 @keyframes 规则是 Chrome 的 not supported。您必须使用前缀规则 @-webkit-keyframes ,例如:

    /* Chrome, Safari, Opera */ 
    @-webkit-keyframes animation {
        0% { }
        100% { }
    } 
    
    /* Standard syntax */ 
    @keyframes animation {
        0% { }
        100% { }
    }
    

    更新

    I'm sureexample

    【讨论】:

    • 由于某种原因这对我不起作用!你确定它适用于转换吗?
    • @keyframes 支持现在当然caniuse.com/#search=keyframes(对于任何未来的谷歌员工)
    猜你喜欢
    • 2023-03-18
    • 2020-03-20
    • 2014-09-20
    • 2019-09-28
    • 2022-07-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多