ios - 关键帧内的非动画属性在 iOS 上被忽略

标签 ios css css-animations

我知道不可动画的属性不会在动画中插入,但是,我的理解是至少(突然)计算了这些值。

因此,例如,假设我想将溢出属性(不可设置动画,即 not in this list)从 hidden 设置为 visible - I期望计算值会适当改变。

(我尝试在 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 上,overflow 的值从隐藏变为可见,但是在 iOS 上,overflow 的值似乎被完全忽略 - 保持其默认值可见。

注意:

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

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

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

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

最佳答案

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

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 - 关键帧内的非动画属性在 iOS 上被忽略,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43498896/

相关文章:

ios - Firebase queryOrderedbyChild 不返回 Null 值

ios - 从 WKWebview 从 cordova-ios 的数据目录加载 html 文件

html - 为什么 Outlook 会忽略我的 div 宽度?

html - 如何将外部 div 的高度设置为始终等于特定的内部 div?

html - html css中的关键帧动画不起作用

javascript - 流畅的 CSS 向下滑动动画

iOS/iPhone 应用程序似乎为我的文本添加了颜色 mask /颜色阴影

ios - Swift:无法在可变对象参数上设置属性值

html - 强制div在同一行

jquery - Fadein 不适用于 Opera 和 Firefox