Html 两个不同图像的动画和变化

有两张图片，第一张是船，第二张是飞机。理想的结果是：船从左到右设置动画，此时平面被隐藏。当船到达屏幕中央时，它消失，飞机出现。这一变化应该顺利进行

.image1{
宽度：259px；
高度：259px；
显示：块；
位置：绝对位置；
底部：135px；
保证金：自动；
@包括过渡（所有1.2秒）；
背景尺寸：包含；
-webkit动画：直升机移动一个19秒线性无限；
动画：直升机移动一个19s线性无限；
不透明度：1；
}
@-webkit关键帧直升机移动一个{
0% {
左：-300px；
}
60% {
不透明度：0；
}
100% {
左：110%；
}
}
@关键帧直升机移动一个{
0% {
左：-300px；
显示：块；
}
59% {
显示：无；
}
60% {
显示：无；
}
100% {
左：110%；
}
}

---

因为我没有你的图像，所以我用的是狗。在这种情况下，“期望的结果是：成年狗从左到右设置动画，此时小狗被隐藏。当成年狗到达屏幕中间时，它消失，小狗出现。此更改应平稳进行。”请注意，

显示

不可设置动画。您需要设置

不透明度的动画


img{
宽度：150px；
高度：150像素；
}
[class^=“image”]{
宽度：150px；
高度：150像素；
显示：块；
位置：绝对位置；
左：0；
右：0；
背景尺寸：包含；
}
.image1{
z指数：2；
动画：daAnimation1 19s线性无限；
}
.image2{
z指数：1；
保证金：自动；
左：0；
右：0；
不透明度：0；
动画：daAnimation2 19s线性无限；
}
@关键帧daAnimation1{
0% {
左：-150px；
不透明度：1；
}
45% {
左：计算（50vw-75px）；
不透明度：1；
}
50% {
左：计算（50vw-75px）；
不透明度：0；
}
100% {
左：110%；
不透明度：0；
}
}
@关键帧daAnimation2{
0% {
不透明度：0；
}
45% {
不透明度：0；
}
50% {
不透明度：1；
}
100% {
不透明度：1；
}
}
因为我没有你的图像，所以我用的是狗。在这种情况下，“期望的结果是：成年狗从左到右设置动画，此时小狗被隐藏。当成年狗到达屏幕中间时，它消失，小狗出现。此更改应平稳进行。”请注意，
显示
不可设置动画。您需要设置
不透明度的动画


img{
宽度：150px；
高度：150像素；
}
[class^=“image”]{
宽度：150px；
高度：150像素；
显示：块；
位置：绝对位置；
左：0；
右：0；
背景尺寸：包含；
}
.image1{
z指数：2；
动画：daAnimation1 19s线性无限；
}
.image2{
z指数：1；
保证金：自动；
左：0；
右：0；
不透明度：0；
动画：daAnimation2 19s线性无限；
}
@关键帧daAnimation1{
0% {
左：-150px；
不透明度：1；
}
45% {
左：计算（50vw-75px）；
不透明度：1；
}
50% {
左：计算（50vw-75px）；
不透明度：0；
}
100% {
左：110%；
不透明度：0；
}
}
@关键帧daAnimation2{
0% {
不透明度：0；
}
45% {
不透明度：0；
}
50% {
不透明度：1；
}
100% {
不透明度：1；
}
}

Hi enxaneta，这是我需要进行一些修改的结果，即，当变换发生时，图像被卡住。第二个图像也必须连续移动。我们能那样做吗？@Danish我不太确定我是否理解你的意思。请看上面的更新。Hi-enxaneta，问题是这两个图像是透明的，并且大小不同…Hi-enxaneta，这是我需要修改的结果，也就是说，在变换发生时图像被卡住了。第二个图像也必须连续移动。我们能那样做吗？@Danish我不太确定我是否理解你的意思。请看上面的更新。嗨，enxaneta，问题是这两张图片是透明的，而且大小不同。。。