iOS上会忽略关键帧内的非动画属性 [英] Non animatable properties within keyframes are ignored on iOS

问题描述

我知道不能在动画内插值非动画属性，但是，我的理解是至少（突然）计算了这些值。

I understand that non-animatable properties are not interpolated within animations, however, my understanding is that the values are at least (abruptly) computed.

例如，假设我要动画化溢出属性（该属性不是可动画的，即不在此列表中）从隐藏到可见-我希望计算出的值会适当更改。

So, for example, let's say I want to 'animate' the overflow property (which is not animatable, i.e. not in this list) from hidden to visible - I would expect that the computed value will change appropriately.

（我尝试在规范，但找不到它明确提及）

(I tried looking in the spec for this but couldn't find it mentioned explicitly)

这实际上是在Chrome和Firefox中发生的，但在iOS中则没有。

This is actually what happens in Chrome and Firefox, but not on 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>

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

Notice that on Chrome and Firefox the value for overflow changes from hidden to visible, however on iOS the values for overflow seem to be completely ignored - keeping its default value of visible.

1）我为颜色添加了动画只是为了证明可动画属性在iOS中工作正常

1) I added animation for the color just to show that animatable properties are working fine in iOS

2）似乎iOS会忽略所有不可动画属性（不仅仅是溢出）-这是另一个演示，它试图为制作动画position 属性。

2) It does seem that iOS ignores all non-animatable properties (not just overflow) - here's another demo which tries to animate the position property.

3）我知道可以使用javascript-演示 ....，但我想使用CSS来实现。

3) I know that this can be done with javascript - demo.... but I would like to do this with CSS.

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

Is this a bug in iOS? Any workarounds?

推荐答案

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

Try applying browser prefixes as per following answers:

CSS3动画无法在野生动物园中使用

关键帧动画不适用于Safari对于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上会忽略关键帧内的非动画属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！