Html 带有父转换的CSS转换在iOS Safari上不起作用
我创建了一个这种情况的模型,因为我无法如此轻松地创建一个可测试的版本。但要了解要点:Html 带有父转换的CSS转换在iOS Safari上不起作用,html,css,sass,Html,Css,Sass,我创建了一个这种情况的模型,因为我无法如此轻松地创建一个可测试的版本。但要了解要点: @keyframes mainFadeIn{ 0% { 不透明度:0; 变换:translateY(-3rem); } 100% { 不透明度:1; 变换:translateY(0); } } //如果我使用这个,没有转换,那么一切都正常。 // //@mainFadeIn{ // 0% { //不透明度:0; // } // // 100% { //不透明度:1; // } // } 梅
@keyframes mainFadeIn{
0% {
不透明度:0;
变换:translateY(-3rem);
}
100% {
不透明度:1;
变换:translateY(0);
}
}
//如果我使用这个,没有转换,那么一切都正常。
//
//@mainFadeIn{
// 0% {
//不透明度:0;
// }
//
// 100% {
//不透明度:1;
// }
// }
梅因先生{
动画名称:mainFadeIn;
动画持续时间:1s;
动画填充模式:两者都有;
动画计时功能:线性;
背景颜色:灰色;
宽度:100%;
高度:16雷姆;
填充:3rem;
}
.卡片{
转换:转换500ms;
变换样式:保留-3d;
-webkit转换来源:50%50%;
透视图:200px;//忽略
保证金:自动;
宽度:30雷姆;
高度:10雷姆;
背景颜色:浅蓝色;
&.翻了{
变换:旋转(-180度);
}
}
.前线,
.回来{
背面可见性:隐藏;
}
.回来{
变换:旋转(-180度);
}
看起来您忘记了
-webkit-
前缀。还建议使用translate3d进行硬件加速。试着这样做:
@-webkit-keyframes mainFadeIn {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3rem, 0);
transform: translate3d(0, -3rem, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes mainFadeIn {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3rem, 0);
transform: translate3d(0, -3rem, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.main {
-webkit-animation-name: mainFadeIn;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-name: mainFadeIn;
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: linear;
background-color: gray;
width: 100%;
height: 16rem;
padding: 3rem;
}
.card {
transition: -webkit-transform 500ms;
-webkit-transform-style: preserve-3d;
transition: transform 500ms;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
-webkit-perspective: 200px; // Ignore
perspective: 200px; // Ignore
margin: auto;
width: 30rem;
height: 10rem;
background-color: lightblue;
&.flipped {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
}
.front,
.back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.back {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
ios safari的版本是什么?ios 9.2.1是操作系统版本。