I have an animation that keeps pushing the footer down with each @keyframes
(我有一个动画，每个@keyframes不断降低页脚)
My footer html:
(我的页脚html：)
<div class="footer
callout"></div><footer
id="colophon" class="site-
footer footer bg-dark" ×
role="contentinfo">
<div class="container footer
inner"><div class="row"><div
class="footer-widget-area">
<div class="col-md-3 col-sm-
6 footer-widget"
role="complementary">
<div id="text-4"
class="widget widget_text">.
<div class="textwidget"><p>.
<a href="http://4309.co.uk/
contact/">Contact</a></p>
</div>
Animation html:
(动画html：)
<div class="fptext">some
text some text some
text</div>
<div class="fatext">some
text some text some
text</div>
Css
(的CSS)
@media(max-width: 768px).
{.fatext{animation: bigger
50s ease forwards;animation.
delay: 0s;;
position:relative;font-size:
15px; color:#43ff0a;bottom:
1700px; font-
weight:bolder;padding:
0px;background.
color:blue;display:block;}}
@keyframes bigger
{from{font-size: 0px} to
{font-size: 18px;}}
And:
(和：)
@media (max-width: 768px).
{.fptext {animation: fadeout
50s ease forwards;animation.
delay: 0s;
}}
@keyframes fadeout{
from {font-size: 0px} to.
{font-size: 40px;}}
As I understand the element needs to be positioned relatively for the animation to work, so I can't re-position it.
(据我了解，该元素需要相对定位才能使动画正常工作，因此我无法对其进行重新定位。)
I could re-position the footer though, which I tried.(我可以重新定位页脚，这是我尝试过的。)
.site-footer{position:
absolute;}
Didn't work.
(没用)
.site-footer {position:
fixed;}
Didn't work.
(没用)
.site-footer
{position:static;}
Didn't work.
(没用)
The only other solution, not really viable, is that I animate the footer to go back up the page once the animation is finished.
(唯一不可行的解决方案是，动画完成后，我会为页脚设置动画以返回页面。)
That is set a 40s delay on it and then animate it back from topx px to top x px.(设置了40秒的延迟，然后将其从topx px设置回顶部x px的动画。)
I'd rather just have it not move at all though.(我宁愿它完全不动。)
That may however give me a gigantic footer unless I can control height.(但是，除非我可以控制身高，否则这可能会给我带来巨大的页脚。)
Alternatively, can padding or negative/relative padding be used?(或者，可以使用填充还是负/相对填充？)
Working example here on mobile
(工作示例这里移动)
In addition, I've discovered that using margin-bottom does work but simply increases the gap between the footer and the bottom of the page whilst maintaining the gap between animation and footer.
(此外，我发现使用margin-bottom确实可以，但是仅增加了页脚和页面底部之间的距离，同时保持了动画和页脚之间的距离。)
ask by Fresh translate from so
