大佬教程收集整理的这篇文章主要介绍了iOS上会忽略关键帧内的不可动画的属性,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
所以,例如,假设我想要将溢出属性(不可动画,即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>
请注意,在Chrome和Firefox上,溢出值从隐藏变为可见,但在iOS上,溢出值似乎完全被忽略 – 保持其默认值为visible.
注意:
1)我添加了颜色的动画,只是为了表明动画属性在iOS中正常工作
2)似乎iOS忽略了所有不可动画的属性(不仅仅是溢出) – 这里是another demo,它试图为position属性设置动画.
3)我知道这可以用javascript – demo完成….但我想用CSS做到这一点.
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,remaining essentially unchanged. It was popularised in </div>
以上是大佬教程为你收集整理的iOS上会忽略关键帧内的不可动画的属性全部内容,希望文章能够帮你解决iOS上会忽略关键帧内的不可动画的属性所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。