我知道不可动画的属性不会在动画中插值,但我的理解是这些值至少(突然)计算出来.
所以,例如,假设我想要将溢出属性(不可动画,即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>
