关键帧中的非动画属性在 iOS 上被忽略

Posted 2023-03-05

【中文标题】关键帧中的非动画属性在 iOS 上被忽略

【英文标题】：Non animatable properties within keyframes are ignored on iOS

【发布时间】：2017-09-15 20:52:57

【问题描述】：

我了解非动画属性不会在动画中插入，但是，我的理解是这些值至少（突然）被计算出来。

因此，例如，假设我想对从hidden 到visible 的溢出属性（不可动画，即not in this list）进行“动画处理”——我希望计算的值会适当地改变。

（我尝试在spec 中查找此内容，但找不到明确提及）

这实际上是在 Chrome 和 Firefox 中发生的事情，而不是在 ios 上。（Safari、iPhone）

.animate 
  border: 5px solid green;
  width: 200px;
  height: 100px;
  animation: 3s resetOverflow;

@keyframes resetOverflow 
  from 
    overflow: hidden;
    color: red;
  
  to  
    overflow: visible;
    color: green;
  

<div class="animate">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in </div>

Codepen Demo

请注意，在 Chrome 和 Firefox 上，溢出的值从隐藏变为可见，但在 iOS 上，溢出的值似乎被完全忽略 - 保持其默认值可见。

注意：

1) 我为 color 添加了动画，只是为了表明 动画属性在 iOS 中运行良好

2) iOS 似乎确实忽略了所有不可动画的属性（不仅仅是溢出） - 这里的 another demo 试图为 position 属性设置动画。

3) 我知道这可以用 javascript - demo.... 但我想用 CSS 来完成。

这是 iOS 中的错误吗？有什么解决方法吗？

【问题讨论】：

是的，这是一个错误。插值规则在 css-transitions 中。

【参考方案1】：

尝试按照以下答案应用浏览器前缀：

CSS3 animation not working in safari

keyframe animation does not work on safari for iOS

.animate 
  border: 5px solid green;
  width: 200px;
  height: 100px;
  -webkit-animation: 3s resetOverflow;
  animation: 3s resetOverflow;


@-webkit-keyframes resetOverflow 
  from 
    overflow: hidden;
    color: red;
  
  to 
    overflow: visible;
    color: green;
  


@keyframes resetOverflow 
  from 
    overflow: hidden;
    color: red;
  
  to 
    overflow: visible;
    color: green;
  

<div class="animate">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in </div>

【讨论】：

不幸的是，浏览器前缀不是这里的问题。请注意，颜色属性会更改，但溢出属性不会更改。 （在 iOS - safari、iphone 等）