transform: scale() translate() 一起用的打包问题
最近在写一个自定义动画,就浏览器和页面打开,动画都正常运行。
但是,用webpack打包后,动画就失效了!
原因是之前的代码是:
.heart {
animation: myfirst 3s infinite;
width: 0.76rem;
position: absolute;
top: 4rem;
left: 62%;
}
@keyframes myfirst {
0% {
transform: scale(1,1) translate(0px, 0px);
}
50% {
transform: scale(1.1,1.1) translate(0px, 10px);
}
100% {
transform: scale(1,1) translate(0px, 0px);
}
}
其中,只要scale的值变了,这个动画就失效了
后来把代码改掉了,如下:
.heart {
animation: myfirst 3s infinite;
width: 0.76rem;
position: absolute;
top: 4rem;
left: 62%;
}
@keyframes myfirst {
0% {
transform: scale(1,1) translate(0px, 0px);
}
50% {
transform: scale(1,1) translate(0px, 10px);
}
100% {
transform: scale(1,1) translate(0px, 0px);
}
}
把scale的值都设置成1,1,这样的,动画开始正常了。
根据经验所得,要么只写scale 的变化,要么只写translate的变化,当两者放在一起的时候,不使用webpack打包的时候,动画正常运行,但是打包后,就不生效了。
看了压缩后的代码,并没有发现异常。。
具体原先还未知,希望知情者相告,谢谢!
- transform样式的学习包含四个属性:translate平移,rotate旋转,scale缩放,skew斜切
- css 的 transform:scale(-1,1) 使得fixed定位失效(fixed会降级为absolute)问题
- iOS 2D绘图详解(Quartz 2D)之Transform(CTM,Translate,Rotate,Scale)
- 浅谈CSS3新特性——transform: rotate(旋转) | scale(缩放) | translate(移动) | skew(倾斜)
- 关于将不同安装文件一起打包问题
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- margin,padding,top,left,transform:translate(10%,10%)等使用百分比的时候参造物的问题
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- ios CGAffineTransformScale缩放 中心点问题
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- css3中关于transform rotate、translate()、skew()、scale()的复合变换
- Android打jar包之将Android工程连同第三方jar包一起打包成jar包问题总结
- android 签名打包和出现的问题transformClassesAndResourcesWithProguardForRelease
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- css3中transform中的translate(),scale(),skew(),一个参数时的情况
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3动画@keyframes中translate和scale混用出错问题
- css3——transform:rotate(旋转)、scale(缩放)、skew(拉伸)、translate(平移)、transform-origin