Question

我目前正在尝试调整我在https://www.alexcurriemedia.com/css-test/

上测试的CSS动画

我需要做的是当页面打开时第一张图像不在屏幕上，并且最后一张图像完全从屏幕上消失

这是html代码：

<table><td><h1 class="animated slideInLeft">
<img src="https://www.alexcurriemedia.com/wp-content/uploads/2015/12/18.jpg" height="500" width="500"/>
</h1></td>
<td><h1 class="animated slideOutRight">
<img src="https://www.alexcurriemedia.com/wp-content/uploads/2015/12/18.jpg" height="100" width="500"/>
</h1></td></table>

this link是动作的样式表：

Answer 1

所以在加载时你想让右边的图像开始从页面上滑落，左边的图像开始滑入？

您的图片在滑过后仍然可见，因为默认情况下，溢出其父级的内容保持可见。尝试将overflow: hidden添加到.content-wrapper。

否则我误解了这个问题。

Answer 2

问题出在您的js小提琴中，您无法在关键帧中转换可见性，它是可见的还是不可见的，因此没有“转换”的中间点，您可以无论如何转换不透明性或使用javascript来切换显示：块;显示：无；或结合使用这两种方法淡出其可见性，然后使用js将其从dom中删除。

另外，您的关键帧语句应匹配：
即from：应该具有所有相同的属性和值
为“至”。

示例：

@keyframes name{
  from{filter:opacity(0) hue-rotate(0deg);}
  to{filter:opacity(1) hue-rotate(288deg);}
}

@keyframes sumName{
  0%{filter:opacity(0) hue-rotate(0deg);}        // Note even though hue-rotate is at 0deg, it will not run if they do not match
  50%{filter:opacity(0.5) hue-rotate(288deg);}
  100%{filter:opacity(1) hue-rotate(24degdeg);}
}

也：顺便说一句，这些`应该在关键帧声明之上。

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

希望其中一些帮助。

CSS动画完全消失

2 个答案: