我有一个类似于这个
fiddle的情况,我有一个CSS3动画,可以缩放绝对位于另一个元素中心的元素.但是,当动画发生时,它偏离中心,如示例中相对于蓝色的红色方块所示.我该如何居中?我已经尝试了一些围绕transform-origin属性的配置,但这并没有产生正确的结果.
代码如下:
@-webkit-keyframes ripple_large { 0% {-webkit-transform:scale(1);} 75% {-webkit-transform:scale(3); opacity:0.4;} 100% {-webkit-transform:scale(4); opacity:0;} } @keyframes ripple_large { 0% {transform:scale(1); } 75% {transform:scale(3); opacity:0.4;} 100% {transform:scale(4); opacity:0;} } .container { position: relative; display: inline-block; margin: 10vmax; } .cat { height: 20vmax; } .center-point { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 10px; width: 10px; background: blue; } .to-animate { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 1px solid red; height: 5vmax; width: 5vmax; transform-origin:center; } .one { -webkit-animation: ripple_large 2s linear 0s infinite; animation: ripple_large 2s linear 0s infinite; } .two { -webkit-animation: ripple_large 2s linear 1s infinite; animation: ripple_large 2s linear 1s infinite; }
解决方法
问题是你正在删除翻译转换.
当您指定新转换(动画内部的转换)时,它会覆盖第一个转换,因此您需要将它们添加到同一转换属性中.在您的情况下,您将删除修复中心对齐的翻译:
@keyframes ripple_large { 0% { transform: translate(-50%,-50%) scale(1) ; } 75% { transform: translate(-50%,-50%) scale(3) ; opacity: 0.4; } 100% { transform:translate(-50%,-50%) scale(4) ; opacity: 0; } } .container { position: relative; display: inline-block; margin: 10vmax; } .cat { height: 20vmax; } .center-point { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 10px; width: 10px; background: blue; transform-origin:center; } .to-animate { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 1px solid red; height: 5vmax; width: 5vmax; } .one { -webkit-animation: ripple_large 2s linear 0s infinite; animation: ripple_large 2s linear 0s infinite; } .two { -webkit-animation: ripple_large 2s linear 1s infinite; animation: ripple_large 2s linear 1s infinite; }
<div class='container'> <img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'> <div class='center-point'> </div> <div class='to-animate one'></div> <div class='to-animate two'></div> </div>
UPDATE
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。