div 元素使用transform:translate(x,y)居中显示,并使用transform:scale(z)作为动画属性,导致transform:translate(x,y)失效
效果如下图:
2. 在1的基础上,给class=‘inside’的div增加 放大的动画 ,效果如下图:
此时可见,在动画的作用下div元素已不是居中显示了。首先要排除是动画引起的混乱还是动画属性引起的混乱,因此在4.中将transform:scale属性换成background-color属性,判断错误的原因。 4. 放大动画 改为**背景颜色变化的动画**,效果如下
由此可见,当动画的属性是transform:scale时,将会影响到div元素的transform:translate属性的效果,出现混乱的现象
正确 同时使用translate属性与scale属性的方式
给目标div元素增加一个父div元素,对父div元素应用translate属性,达到居中显示的效果;在目标div元素应用scale动画,达到在居中位置显示,并放大动态效果。效果如图:
好啦,这样就达到了移位和放大的动画效果!至于两个样式同时使用会出现混乱的原因,更我了解了,再来更新哈!再见ヾ( ̄▽ ̄)ByeBye