Transformation and swapping between two distinct visuals

In this scenario, there are two images: a boat and a plane. The specific effect desired is as follows: The boat should animate from left to right, while the plane remains hidden. Once the boat reaches the middle of the screen, it should disappear and the plane should appear. This transition should be smooth.

.image1 {
  width: 259px;
  height: 259px;
  display: block;
  position: absolute;
  bottom: 135px;
  margin: auto;
  @include transition(all 1.2s);
  background-size: contain;
  -webkit-animation: helicopter-move-one 19s linear infinite;
  animation: helicopter-move-one 19s linear infinite;
  opacity: 1;
}

@-webkit-keyframes helicopter-move-one {
  0% {
    left: -300px;
  }
  60% {
    opacity: 0;
  }
  100% {
    left: 110%;
  }
}

@keyframes helicopter-move-one {
  0% {
    left: -300px;
    display: block;
  }
  59% {
    display: none;
  }
  60% {
    display: none;
  }
  100% {
    left: 110%;
  }
}
<div class="outer">
  <div class="image1"><img src="" alt="boat"></div>
  <div class="image2"><img src="" alt="plane"></div>
</div>

Answer №1

Instead of using your images, I'm incorporating dogs as placeholders for this demonstration. The objective here is to have an adult dog move from left to right on the screen, while a puppy remains hidden. As the adult dog reaches the middle of the screen, it should disappear, and the puppy should appear smoothly. It's important to note that the display property is not animatable in CSS, so you'll need to animate the opacity instead.

img {
  width: 150px;
  height: 150px;
}

[class ^="image"] {
  width: 150px;
  height: 150px;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  background-size: contain;
}

.image1 {
  z-index: 2;
  animation: daAnimation1 19s linear infinite;
}
.image2 {
  z-index: 1;
  margin: auto;
  left: 0;
  right: 0;
  opacity: 0;
  animation: daAnimation2 19s linear infinite;
}

@keyframes daAnimation1 {
  0% {
    left: -150px;
    opacity: 1;
  }
  45% {
    left: calc(50vw - 75px);
    opacity: 1;
  }
  50% {
    left: calc(50vw - 75px);
    opacity: 0;
  }
  100% {
    left: 110%;
    opacity: 0;
  }
}

@keyframes daAnimation2 {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
<div class="outer">
  <div class="image1"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt="adult dog"></div>
  <div class="image2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyBeagle300.jpg" alt="puppy"></div>
</div>

I trust this explanation clarifies your query.

UPDATE: This response pertains to @Danish's comment (refer below)

img {
  width: 150px;
  height: 150px;
}

[class ^="image"] {
  position:absolute;
  background-size: contain;
}

.image1 {
  z-index: 2;
  opacity: 1;
  animation: daAnimation1 19s linear infinite;
}
.image2 {
  z-index: 1;
  opacity: 1;
  
}

.outer{
  width: 150px;
  height: 150px;
  display: block;
  position: absolute;
  animation: OuterAnimation 19s linear infinite;
}

@keyframes OuterAnimation{
 0% {
    left: -150px;
  }
 
  100% {
    left: 110%;
  }
}

@keyframes daAnimation1 {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
<div class="outer">
  <div class="image1"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt="adult dog"></div>
  <div class="image2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyBeagle300.jpg" alt="puppy"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for adjusting the positioning of a div element in a responsive design

I am currently working on my website and facing a layout issue. In desktop mode, there is a sidebar, but in mobile view, the sidebar goes down under the content displayed on the left side. I would like the sidebar to appear at the top in mobile view, fol ...

Should font size, line height, and font-family be declared to the body before or after the CSS reset?

Let's say I am using the Eric Meyer Reset and I need to apply a style to the body element. body { font: 100%/1.5 "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;*/ } Should I place this before or after the reset CSS? html, body, div, span, a ...

Angular: Maximizing Input and Output

I'm having trouble with the function displaying within the input field. My goal is to simply allow the user to enter a name and have it displayed back to them. HTML: <div ng-app = "mainApp" ng-controller = "studentController"> <tr> < ...

Can CSS be used for creating unique color combinations?

I am facing a challenge where I have two div elements with different transparent, colored backgrounds that overlap each other. My goal is to find a way to customize the color in the area where these elements overlap. For instance, if I blend red and blue ...

Can the current website navigation be integrated into the blog script?

People might see me as a spoil sport for not using Wordpress, but I prefer a flatfile blog system for my small site. Currently, I am using the ozjournals-3.2 blog system. I need assistance in installing a header and site navigation on top of the blog page ...

Unlock the potential of Bootstrap 4 in Vue.js 2 without the need for bootstrap-vue

I'm interested in finding a way to incorporate bootstrap 4 into my vue.js 2.6 framework. Despite the abundance of tutorials available, many of them are outdated as of late 2020, or they insist on using bootstrap-vue, which introduces unwanted addition ...

Directive isolated scope is encountering an undefined $scope variable

After searching through various Stack Overflow posts on the issue, I have tried different solutions but still can't get my directive to render. The goal is to pass an integer to my directive within an ng-repeat loop and display an emoji based on that ...

Is it feasible to add a row in bold font following every set of 10 rows written in regular text?

Looking for a way to implement pagination on a table with dynamic headers? I am using rows with font-weight:bold to act as headers for the pagination. Is it possible to insert a row with font-weight:bold every 10 rows? I am unsure of how to achieve this, ...

Tips on choosing JSON data to show on an HTML page

I am working with JSON data from a specific URL and I need to display only the information related to France on an HTML page. However, I am unsure of how to achieve this. Can someone please assist me? Here is my JavaScript code: // API Fetch Call const ...

How can I stop jQuery mobile from updating the document title?

It appears that jQuery mobile automatically uses the text content of data-role="header" to set the document.title. For example: <div data-position="fixed" data-role="header"> <h1>This text</h1> </div> To work around this, I ha ...

Having trouble with Bootstrap v4 dropdown menu functionality?

For some reason, I cannot get the dropdown menu to work in my Bootstrap v4 implementation. I have tried copying and pasting the code directly from the documentation, as well as testing out examples from other sources on separate pages with no luck. &l ...

Implementing a clickable search icon within a form input field using CSS: a guide

I have added a search icon to the form input field. Check it out here: https://i.sstatic.net/pnv6k.jpg #searchform { position: relative; } #searchform:before { content: "\f118"; font-family: "pharma"; right: 0px; position: absolute; ...

XMLWorker: unable to align cell vertically properly

Upon reviewing this code snippet: <table> <tr> <td border="1"> <table> <tr><td>Blah</td></tr> <tr><td>Blah</td></tr> ...

Opening a navigation app through a smartphone webpage

My goal is to enable users to click on a postcode and open their native map app. Most of the solutions I've come across are tailored to specific vendors. Is there a universal "maps" protocol that can launch the native app? Could something like "maps ...

The shade of gray on Google Maps is distinctive

Why is my Google Maps script gray when the page loads? When I inspect the elements, it seems like it's due to resizing. Can anyone help me with this issue? Thanks in advance for any assistance. Below is the HTML code for the map which is included with ...

The usage of an import statement is not permissible outside of a module

Having some trouble using the mathjs library to calculate complex solutions for the quadratic equation. No matter how I try to import the library into my code, I keep encountering errors. Initially, I attempted this method: At the top of my root.js file, ...

Control the switch for CSS selectors

Consider the following scenario where CSS rules are defined: <style> table {background:red;} div {background:green;} </style> In addition, there is HTML code that calls a JavaScript function: <table onclick="tu ...

Highchart displays text centrally on legend hover

I am struggling with the code provided here. My goal is to make text appear in the center of the donut chart when hovering over the legend. Similar to how it works when hovering over a single piece of the donut chart. var chart = new Highcharts.Chart ...

Is it possible for a gradient between accessible colors to also be accessible?

Ensuring accessibility on websites is a top priority for me, with our goal being at least AA standard. We utilize tools like and to test the contrast between background colors and black or white text. For example, let's consider white (#fff) text a ...

Is there a CSS3 Selector With Similar Functionality to jQuery's .click()?

For a few years now, I have been utilizing a pure CSS navigation system. However, with the recent increase in mobile site projects at my workplace, I am encountering issues with drop-down menus not functioning properly on mobile devices. Despite this chall ...