我正在尝试编写一个基于 CSS 的过渡,将文本从水平中心移动到距页面左侧特定距离处。我当前的 CSS 看起来像这样(目标是带有文本和类“标题”+“动画”的 div):
.title {
position: absolute;
min-width: 100%;
text-align: center;
}
.anim {
animation: translate-title 2s linear;
}
@keyframes translate-title {
0% {
min-width: 100%;
left: 0px;
}
100% {
min-width: 0;
left: 50px;
}
}
上面代码的问题是 min-width 为 0 小于文本的实际任意宽度,因此由于 'min-width' 引起的左移在由于 ' 引起的右移之前完成左'完成。最终结果是明显的反弹,我想将其移除。
在 http://jsfiddle.net/62tQE/4/ 查看 chrome/ff
谁能想到不涉及使用 js 的解决方案?
最佳答案
我从动画中删除了 left
并添加了 padding
和 box-sizing
到 .title
:
.title {
position: absolute;
min-width: 100%;
text-align: center;
width: auto;
padding: 0 50px;
box-sizing: border-box;
}
.anim {
-webkit-animation: translate-title 2s linear;
-webkit-animation-fill-mode: forwards;
animation: translate-title 2s linear;
animation-fill-mode: forwards;
}
@-webkit-keyframes translate-title {
0% {
min-width: 100%;
}
100% {
min-width: 0;
}
}
@keyframes translate-title {
0% {
min-width: 100%;
}
100% {
min-width: 0;
}
}
关于html - 从中心到特定位置的 CSS 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18280348/