动画效果css
动画效果css
提问于 2020-04-23 17:32:58
我只是在css中玩弄动画。
这是我正在写的代码。
html：
<div class="wrapper">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>
<div class="item-5"></div>
<div class="item-6"></div>
</div>和css：
.wrapper {
display: grid;
width: fit-content;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;
grid-gap: 1rem;
position: relative;
}
.wrapper>div {
background: linear-gradient(to bottom right, crimson, yellow);
border: 5px solid #555;
border-radius: 5px;
width: 150px;
height: 150px;
}
.item-6 {
animation-name: playthis;
animation-duration: 5s;
animation-fill-mode: both;
animation-iteration-count: initial;
}
@keyframes playthis {
0% {
width: 100%;
}
50% {
width: 400%;
}
100% {
width: 100%;
}
}这只是一个简单的动画，但我正在试图弄清楚如何才能达到一定的效果，那就是:当方框达到400%的宽度时，让右边框保持固定在该位置，然后恢复到原来的大小……就好像右边的边框把左边拖到了自己的位置……我希望我说得很清楚！
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-23 18:37:49
这是使用margin-left的一种可能的解决方案。
:root{
--maxWidth: 200%;
--finalWidth: 100%;
}
.wrapper {
display: grid;
width: fit-content;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;
grid-gap: 1rem;
position: relative;
}
.wrapper>div {
background: linear-gradient(to bottom right, crimson, yellow);
border: 5px solid #555;
border-radius: 5px;
width: 150px;
height: 150px;
}
.item-6 {
animation-name: playthis;
animation-duration: 5s;
animation-fill-mode: both;
animation-iteration-count: initial;
}
@keyframes playthis {
0% {
width: var(--finalWidth);
}
50% {
width: var(--maxWidth);
margin-left: 0%
}
100% {
width: var(--finalWidth);
margin-left: calc(var(--maxWidth) - var(--finalWidth));
}
}<div class="wrapper">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>
<div class="item-5"></div>
<div class="item-6"></div>
</div>
可以使用对象的width计算最后关键帧中的左边距值，如下所示：
maxWidth - finalWidth 其中maxWidth是动画50%的宽度，finalWidth是动画结束时的宽度。为了简化代码的使用，我使用了css变量并计算了最终的margin-left
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61383886
复制相关文章
相似问题
腾讯云开发者
