iOS上会忽略关键帧内的不可动画的属性

Question

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

所以，例如，假设我想要将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 上，溢出值似乎完全被忽略 - 保持其默认值为visible。

的 NB：

1）我为 color 添加了动画，只是为了表明可动画的属性在iOS中正常工作

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

3）我知道这可以通过javascript完成 - demo ....但我想用CSS做到这一点。

这是iOS中的错误吗？任何解决方法？

Answer 1

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

CSS3 animation not working in safari

keyframe animation does not work on safari for iOS

＆＃13;

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;