时间戳

首页 > 解决方案 > 为什么我的 CSS 动画在 Safari 12 中不起作用？

html - 为什么我的 CSS 动画在 Safari 12 中不起作用？

问题描述

标题基本上给出了它。我的动画在 Chrome (80) 和 Firefox (57) 中运行良好，但在 Safari (12) 中根本无法运行。

我期望发生的是从左上到右下对角线在屏幕上绘制一条直线。

我已经尝试了十几种代码变体，以下是一个：（我尝试的所有变体在 Chrome 和 Firefox 中都可以正常工作）

    #move {
    top:0;
    left:0;
    width: 0;
    height: 5px;
    background: rgb(255, 255, 255);
    position: absolute;
    -webkit-animation-name: mymove;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    -webkit-transform: rotate(var(--a));
    -webkit-transform-origin: top left;
    -webkit-animation-delay: 1s;
    -moz-animation-name: mymove;
    -moz-animation-duration: 3s;
    -moz-animation-timing-function: linear;
    -moz-animation-fill-mode: forwards;
    -moz-transform: rotate(var(--a));
    -moz-transform-origin: top left;
    -moz-animation-delay: 1s;
    -ms-animation-name: mymove;
    -ms-animation-duration: 3s;
    -ms-animation-timing-function: linear;
    -ms-animation-fill-mode: forwards;
    -ms-transform: rotate(var(--a));
    -ms-transform-origin: top left;
    -ms-animation-delay: 1s;
    -o-animation-name: mymove;
    -o-animation-duration: 3s;
    -o-animation-timing-function: linear;
    -o-animation-fill-mode: forwards;
    -o-transform: rotate(var(--a));
    -o-transform-origin: top left;
    -o-animation-delay: 1s;
    animation-name: mymove;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    transform: rotate(var(--a));
    transform-origin: top left;
    animation-delay: 1s;
  }



@-webkit-keyframes mymove {
    to {
    width: var(--w);
    /*background-color: rgb(67, 67, 92);*/
    }
    }

@-moz-keyframes mymove {
to {
width: var(--w);
/*background-color: rgb(67, 67, 92);*/
}
}

@-ms-keyframes mymove {
to {
width: var(--w);
/*background-color: rgb(67, 67, 92);*/
}
}

@-o-keyframes mymove {
    to {
    width: var(--w);
    /*background-color: rgb(67, 67, 92);*/
    }
    }

@keyframes mymove {
    to {
    width: var(--w);
    /*background-color: rgb(67, 67, 92);*/
    }
    }

一个较短的：

#move {
  top:0;
  left:0;
  width: 0;
  height: 5px;
  background: rgb(255, 255, 255);
  position: absolute;
  animation: mymove 3s;
  animation-fill-mode: forwards;
  transform-origin: top left;
  transform: rotate(var(--a));

}

@keyframes mymove {
    to {
    width: var(--w);
    }
    }

的HTML：

<div id="move"></div>

我试图考虑：

webkit： 为什么我的 CSS3 动画在 Chrome 或 Safari 中不起作用？

CSS3 动画：未在 Safari 中加载

变换：旋转在 Safari 中不起作用

拆分速记符号： CSS3 动画在 safari 中不起作用

延迟动画： CSS3 动画在 Safari 中不起作用

我尝试过的所有方法似乎都不适用于 Safari。我在这里想念什么？任何帮助将不胜感激！

标签： htmlcssanimationsafaricss-transforms

解决方案

我有一个非常相似的问题。像 OP 一样，我正在使用 'to' 属性设置关键帧：

@keyframes dash {
  to {
    dash-offset: 0;
  }
}

这对于 Chrome 和 Firefox 来说似乎很好。我发现 Safari 和 iOS Safari 也需要设置“from”属性。这与MDN 声称“如果关键帧规则没有指定动画的开始或结束状态（即 0%/from 和 100%/to），浏览器将使用元素的现有样式作为开始/结束状态。

我正在为一个动态元素制作动画，所以我最终使用 Web Animations API 来描述所有浏览器都可以理解的动画：

const lineAnimationTiming: EffectTiming = {
        duration: 1000,
        easing: 'ease-in-out'
    };
const length = line.getTotalLength();
line.style.strokeDasharray = `${length} ${length}`;
line.animate(
  [
    { strokeDashoffset: length },
    { strokeDashoffset: 0 }
  ],
  lineAnimationTiming
);

编辑 2021 年 9 月 3 日：使用普通 HTML/Javascript/CSS 测试 Safari，此问题不会重现。看到这个 Stackblitz。当我第一次遇到这个问题时，我碰巧正在使用 Angular。这个问题确实在那里重现。看到这个 Stackblitz。作为这个 bug报告给 Angular 。

推荐阅读