html - CSS关键帧-缩放和翻译

原文 标签 html css animation css-animations

我正在尝试缩放和平移绝对位置的div,但是在缩放之后,div将不会移动到我在关键帧中给定的确切坐标。



我知道这是由于div的坐标所致,与未缩放时的坐标相同。

我可以调整关键帧的最终坐标,但是有更聪明的方法来解决这个问题吗?



这是我的代码(自动删除了供应商前缀)和here's a fiddle

的HTML

<div class="popin willGoToUpperLeft"></div>


的CSS

.popin{
    width:400px;
    height:200px;
    position:absolute;
    top:300px;
    left:200px;
    background:url('//placekitten.com/400/200');
}

.willGoToUpperLeft{
  animation: scaleOut 1s ease-in-out 0s 1 normal forwards, 
             goToLeftCorner 1s ease-in-out 1s 1 normal forwards;
}

@keyframes scaleOut {
  0% { 
    transform: scale(1);
  }
  100% { 
    transform: scale(0.1);
  }
}
@keyframes goToLeftCorner {
  100% { 
    top: 0px;
    left: 0px;    
  }
}

最佳答案

最终使用

transform-origin: 0% 0%;


保持原始坐标。

这是一种解决方法,效果不如从中心缩放那么好,但是暂时可以使用。

如果有人有一个聪明的解决方案来保持从中心扩展,我很感兴趣!

关于html - CSS关键帧-缩放和翻译,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20379778/

相关文章:

html - iPhone上奇怪的CSS渲染

javascript - 在 IE11 Windows 8.1 上,单击后按钮仍然突出显示

jquery - 搜索表单css类加载两次并影响ajaxcomplete函数后的位置

javascript - JavaScript/jQuery:在页面上遵循路径

ios - UIView animateWithDuration线性吗?

html - 如何修复IE11中的滚动链接

javascript - 不断获取:“尝试导入错误:'loadFrozenModel'未从'@ tensorflow/tfjs-converter'中导出”

php - 请帮助我创建一个提交表单,该表单将提交并保留在同一页面上。

html - Shopify-精选图片在收藏夹 View 中复制了产品

html - 仅使用 CSS 均衡 2 div 高度