我一直在尝试自学一些带有关键帧的 css 动画，我正在尝试创建一些东西，其中有一个小方 block 落下，然后从那个方 block 中，一个矩形从左边突出，然后显示一些大约 8 秒后发短信，然后 rentangle 退回到较小的正方形(向右)，而较小的正方形向上退回到“稀薄的空气”中。如果您想知道这是干什么用的，那是当有人在我直播时在 Twitch TV 上关注我时的提醒通知。这是一个 JSFiddle到目前为止我的努力。由于某种原因，在 JSFiddle 上，内容没有出现在动画之前，但是在我使用的警报服务上，它确实发生了。我已经链接了 their tester here ，这样您就明白我的意思了。
HTML 代码:
<html>
<head>
<title>GR412 Twitch Follower Alert</title>
<link href="Twitch\followeralert.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="follower-container">
<div class="left-square-container">
</div>
<div class="right-retangle-container">
<div class="header">
<span class='keyword name'>{name}</span> is now following you!
</div>
</div>
</div>
</body>
</html>
CSS 代码:
@keyframes slideInFromAbove {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
@keyframes slideInFromTheLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes slideInFromBelow {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
@keyframes slideInFromTheRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
.follower-container {
display: flex;
font-family: 'Roboto';
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.left-square-container {
width: 75px;
height: 75px;
background: #313131;
animation: 1s 1s 1 slideInFromAbove;
}
.right-retangle-container {
width: 500px;
height: 75px;
background: #212121;
animation: 1s 2s 1 slideInFromTheLeft;
}
.header {
font-size: 24px;
color: #ffffff;
text-align: center; /*vertical alignment of text*/
position: relative; /*horizontal alignment of text*/
top: 50%; /*horizontal alignment of text*/
transform: translateY(-50%); /*horizontal alignment of text*/
margin: 10px,
10px,
10px,
10px; /*GOT TO HERE, THIS COULD BE CAUSING TWITCHING*/
}
.keyword:not(.user_message) {
color: #0d47a1;
}
但是存在一些问题，首先是内容先出现，然后是动画。我希望它从一个空屏幕开始，然后动画确保正方形首先下降，然后 rentangle 从正方形突出，最后显示文本。这三个组件应保持 8 秒，然后如前所述，另一个动画应按第一段中指定的顺序隐藏每个组件。
第二个问题是，当 rentangle 突出时，它不是从正方形的右侧边缘突出，而是从左侧突出。所以它与正方形重叠，破坏了效果。
我的代码基于这个现有问题:css3 transition animation on load? ，这很有帮助，但对我的特定需求没有帮助。
如有任何帮助，我们将不胜感激，如果有什么不清楚的地方，请告诉我。
请注意，如果第二个链接不起作用，请告诉我，我会对其进行排序。
谢谢，GR412。
最佳答案
问题1:您需要为内容设置初始位置的样式。
问题 2:position:relative； z-index:/*some value*/ 所以你可以适本地分层内容。
你还需要使用animation-fill-mode: forwards
这会将结束样式设置为与之关联的 @keyframes 的结束样式。
我已经调整了你的时间。这是一个 plnkr它的。阅读 CSS 中的注释
您最终不得不计算百分比。我会考虑制定一个可以接受 scss/less/sass 等变量的计算。
CSS 注释:
/*
to calculate these percentages:
([seconds of portion of animation] x 100)/[total seconds of animation]
1) slideInFromAbove starts
2) slideInFromTheLeft starts
3) slideInFromTheLeft ends
4) slideInFromAbove ends
slideInFromAbove:
1) slide down
2) hold
2) slide up
slideInFromTheLeft:
1) slide right
2) hold
3) slide left
*/
关于html - CSS 关键帧 - 动画在内容已经静态出现后开始，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44702439/