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

概述我知道不可动画的属性不会在动画中插值,但我的理解是这些值至少(突然)计算出来. 所以,例如,假设我想要将溢出属性(不可动画,即not in this list)“动画”从隐藏到可见 – 我希望计算出的值会适当改变. (我尝试在spec中寻找此但未能明确提到它) 这实际上是在Chrome和Firefox中发生的事情,但在iOS上却没有.(Safari,iPhone) .animate { bor 我知道不可动画的属性不会在动画中插值,但我的理解是这些值至少(突然)计算出来.

所以,例如,假设我想要将溢出属性(不可动画,即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 >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.

注意：

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 >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,remaining essentially unchanged. It was popularised in </div>

总结

以上是内存溢出为你收集整理的iOS上会忽略关键帧内的不可动画的属性全部内容，希望文章能够帮你解决iOS上会忽略关键帧内的不可动画的属性所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。