时间戳

首页 > 解决方案 > 动画对齐

html - 动画对齐

问题描述

我正在动画我的模态以在被调用时缩放和缩放。我已将其设置为在中心对齐，但动画从屏幕的右下角开始，然后移动到中心。codepen 以便更好地理解

.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@keyframes animatezoom {
from {transform: scale(0)} 
to {transform: scale(1)}
}

标签： htmlcssfrontend

解决方案

只需从类中删除、top和属性并更改. 所以你的CSS看起来像这样：leftpositiontransformlogin-modal-contentmargin: autologin-modal-content

.login-modal-content {
    font-family: 'Segoe UI';
    text-align: center;
    border:none;
    background: #3e3e3f;
    border-radius: 20px;
    color:#ffff;
    width: 35%; /* Could be more or less, depending on screen size */
    margin: auto;
}

您已经将父母定位为中心，因此不必也定位孩子absolute。它是相对于其父级的。

推荐阅读