Ways to simultaneously apply fade in and fade out effects using CSS

body {
  background-image: url("background.jpg");
  background-attachment: fixed;
  font-family: 'Roboto', sans-serif;
  color: #333333;
}
#container {
  height: 1000px;
}
/* HEADER WITH NAVIGATION BAR AND LOGIN OPTION */
#head {
  position: absolute;
  height: 150px;
  width: 100%;
  background-color: #ffffff;
  right: 0px;
  left: 0px;
  top: 0px;
}

#logo-image {
  position: relative;
  margin-top: 40px;
  margin-left: 40px;
}

#logo-image:hover {
  -webkit-animation: blurEffect 0.5s ease-in;
}

@-webkit-keyframes blurEffect {
  0% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  50% {
    -webkit-filter: blur(1px);
    filter: blur(2px);
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
}

.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}

.navigationmenu-main {
  list-style-type: none;
  overflow: hidden;
  background-color: #333;
}

.navigationmenu-parent {
  float: left;
}

.navigationmenu-child {
  display: inline-block;
  color: white;
  width: 50px;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  background-color: #333;
  -webkit-transition: background-color .3s;
}

.navigationmenu-child:hover {
  background-color: #111;
}

.navigationmenu-child:hover + .navigationmenu-line {
  width: 100%;
}

.navigationmenu-line {
  height: 3px;
  background-color: red;
  width: 0%;
  -webkit-transition: width .3s;
  -webkit-transition-timing-function: ease;
}

.login-parent {
  float: right;
}

.login-child {
  display: inline-block;
  color: white;
  width: auto;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  background-color: #333;
  -webkit-transition: background-color .3s;
}

.login-child:hover {
  background-color: #111;
}

.login-child:hover + .navigationmenu-line {
  width: 100%;
}

#loginbox {
  display: block;
  visibility: hidden;
  position: absolute;
  top: 132px;
  right: 90px;
  z-index: 999;
  background: #a6a6a6;
  background-image: linear-gradient(top, #fff, #eee);
  padding: 15px;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, .9);
  border-radius: 3px 0 3px 3px;
  -webkit-transition: padding .3s;
}

.login-parent:hover #loginbox {
  visibility: visible;
}

#loginform {
  padding: 5px;
}

#loginelement {
  padding: 5px;
}
/*----------------------*/
/* MAIN BODY */
#main{
position: relative;
  height: 100%;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
  top: 0px;
  bottom: 100px;
}
#box {
  position: relative;
  height: 100%;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(255,255,255,0.4);
  top: 140px;
  bottom: 100px;
  box-shadow: 4px 4px 3px 1px rgba(0,0,0,0.4);
}
/*---------------*/
/* SLIDER */
.slider {
  max-width: 100%;
  height: 500px;
  margin: 20px auto;
  position: absolute;
  top: 130px;
  left: 0px;
  right: 0px;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide1 {
  background: url("image1.jpg")no-repeat center;
      background-size: cover;
    animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;
} 
.slide2 {
  background: url("image2.jpeg")no-repeat center;
      background-size: cover;
    animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
.slide3 {
    background: url("image3.jpg")no-repeat center;
      background-size: cover;
    animation:fade3 8s infinite;
-webkit-animation:fade3 8s infinite;
}
@keyframes fade
{
  0%   {opacity:1}

  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}
/*-----------------*/
/* FOOT AREA FIXED */
#foot {
  position: fixed;
  height: 80px;
  width: 100%;
  background-color: #333;
  right: 0px;
  left: 0px;
  bottom: 0px;
}
<!DOCTYPE html>
<html>

  <head>
    <title>
      Atlantis Paradiso | A luxury retreat
    </title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  </head>
  <!DOCTYPE html>
  <title>
    Atlantis Paradiso | A luxury retreat
  </title>

  <body>
    <div id="container">
      <div id="head">
        <img src="brand-logo.png" id="logo-image" height="20%" width="20%">
        <ul id="nav_bar" class="navigationmenu-main">
          <li class="navigationmenu-parent">
            <a href="" class="navigationmenu-child">Home</a>
            <div class="navigationmenu-line">
            </div>
          </li>
          <li class="navigationmenu-parent">
            <a href="" class="navigationmenu-child">About Us</a>
            <div class="navigationmenu-line">
            </div>
          </li>
          <li class="navigationmenu-parent">
            <a href="" class="navigationmenu-child">Services</a>
            <div class="navigationmenu-line">
            </div>
          </li>
          <li class="navigationmenu-parent">
            <a href="" class="navigationmenu-child">Gallery</a>
            <div class="navigationmenu-line">
            </div>
          </li>
          <li class="navigationmenu-parent">
            <a href="" class="navigationmenu-child">Contact</a>
            <div class="navigationmenu-line">
            </div>
          </li>
          <li class="login-parent">
            <div class="login-child">Sign Up</div>
            <div class="navigationmenu-line">
            </div>
          </li>
          <li class="login-parent">
            <div class="login-child" id="trigger">Login ▼</div>
            <div class="navigationmenu-line">
            </div>
            <div id="loginbox">
              <form id="loginform">
                <input type="text" name="email" id="loginelement" placeholder="Username / Email">
                <br>
                <br>
                <input type="password" name="password" id="loginelement" placeholder="Password">
                <br>
                <br>
                <input type="submit" name="loginsubmit" id="loginelement">
                <input type="checkbox" name="loggedin" id="loginelement"> Remember Me
              </form>
            </div>
          </li>
        </ul>
      </div>
      <div class='slider'>
  <div class='slide1'></div>
  <div class='slide2'></div>
  <div class='slide3'></div>
</div>
        
      <div id="foot">
        <p align="Center">
          Ocean Drive, Miami, FL, 33139, United States
        </p>
      </div>
    </div>
  </body>

</html>

I am currently working on creating a CSS image slideshow and I need assistance with making picture 1 smoothly fade out while picture 2 fades in seamlessly within one animation cycle. Any advice or guidance on achieving this effect would be greatly appreciated.

javascriptjqueryhtmlcss

Answer №1

My suggestion is to streamline your code by using just one slide div for different backgrounds.

<div class="slider">
    <div class="slide1"></div>
</div>

Here is the CSS code:

.slide1 {
   position: absolute;
   width: 300px;
   height: 200px;
   background: url("https://unsplash.it/200/300") no-repeat center;
   background-size: cover;
   animation: fade 8s infinite;
   -webkit-animation: fade 8s infinite;
} 

@keyframes fade {
   0%   {
     background: url("1.jpg") no-repeat center;
   }
   33.333% {
      background: url("2.jpg") no-repeat center;
   }
   66.666% {
      background: url("3.jpg") no-repeat center;
   }
   100% {
      background: url("1.jpg") no-repeat center;
   }
}

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

Learn the method to display a particular post using its unique post ID

I need some help displaying two specific posts by utilizing their post IDs. I'm struggling with the code to retrieve and call these post IDs. Can someone assist me? /////////////////////////////// ////////////////////////////// <div class="foo ...

phphtmlwordpresspostcustom-post-type

Protractor never-ending cycle

In my previous question, I encountered an issue with clicking a button until it becomes disabled. Initially, the solution was as follows: var nextPage = function () { if (element(by.css('[ng-click="vm.nextPage()"]')).isEnabled()) { e ...

javascriptangularjsrecursionprotractorinfinite-loop

BufferGeometry is not being displayed

After working extensively with BufferGeometry, I considered myself quite familiar with it. However, I am currently facing an issue while trying to create a simple square plane - there is no visible plane, no errors, and everything seems to be set up correc ...

javascriptthree.jsbuffer-geometry

Error encountered while handling document events during server-side rendering in ReactJS

I am currently developing a React.js application that requires keyboard navigation for a horizontal scrolling carousel of items. In the existing version, only the left and right arrows are used for navigation, with Enter being used to make selections. I ha ...

javascriptreactjsexpress

Why have the bars been positioned on the left instead of the right, and why does the mobile version require sliding instead of simply accessing the menu through a function?

Hello everyone, I'm currently working on designing a mobile-friendly header menu with the bars positioned on the right side of the screen. The goal is to utilize JavaScript to allow users to click either an 'X' icon or the bars to open the m ...

javascripthtmlcssfirefoxmenu

Getting an Array of all values in <th> using jQuery

Is there a more efficient way in jQuery to retrieve an array of all the inner texts of <th> elements within a table? The following code snippet successfully achieves this: $("th").toArray().map(th => th.innerText) I'm curious if there is a ...

javascripthtmljquerynode.js

Controlling the file selection window of a browser with protractor/jasmine

The tools I am currently using are Protractor 3.3.0, Jasmine 2.4.1, and Selenium Standalone Server. My main objective is to create a test scenario where the test navigates to a specific page and then clicks on an 'upload file' button. This actio ...

javascriptnpmjasmineprotractor

Modify form layout upon selection of a specific radio button

Hey there! I'm a student currently diving into the world of JavaScript, CSS, and HTML. However, I've encountered a little problem while working on an exercise that involves using Bootstrap. function ShowForm(formId){ document.getElementByI ...

javascripthtmljquerycssradio-button

Align pictures in the middle of two divisions within a segment

This is the current code: HTML: <section class="sponsorSection"> <div class="sponsorImageRow"> <div class="sponsorImageColumn"> <img src="img/kvadrat_logo.png" class="sponsorpicture1"/> </div& ...

javascripthtmlcss

Utilizing AngularJS to implement checkbox selection within a table

I'm working on a method that will receive an Id from a table when a checkbox is checked and update the $scope.selected array in my Angular controller. If the checkbox is unchecked, it should remove the corresponding item from $scope.selected. Here&ap ...

javascriptangularjsangularjs-scope

Show different components depending on immediate modifications and complete or incomplete data entry in Vue.js

I am trying to create a simple form with a search bar and two buttons. The goal is for the fill button to be visible only when there is text in the input, and for the empty button to show when the input is empty. I want the buttons to dynamically display o ...

javascriptvue.jsvuejs2

Set the display property of all child elements within the DIV to none

CSS <div class="container"> <span></span> <input type="text"> </div> JavaScript function hideElements(){ let container = document.querySelector(".container"); let elements = ...

javascriptstylesdisplay

Unable to alter or eliminate the grey background using material-ui

Struggling with a React application that incorporates material-ui. Despite my efforts, I can't seem to get rid of an unwanted grey background in one section of the app. Attempted solutions: body { background-color: #ffffff !important; } * { b ...

cssreactjsmaterial-ui

React Error: Unable to Call function this.state.Data.map

I'm encountering an issue with mapping objects in ReactJS. Even though I am able to fetch data, when I try to map it, I receive the following error: this.state.Data.map is not a function Here's the code snippet: import React, { Component } fro ...

javascriptreactjs

The process of extracting values from an HTML tag using Angular interpolation

I am working on an Angular application that has the following code structure: <p>{{item.content}}</p> The content displayed includes text mixed with an <a> tag containing various attributes like this: <p>You can find the content ...

javascriptregexangular

What methods can I use to gauge the performance of my angular website?

After completing my web project with nodejs and expressjs on the backend and angularjs on the frontend, I am worried about the performance implications. People say that JavaScript can be dangerous if not used correctly, so I ran jshint to verify my synta ...

javascriptangularjsnode.js

The issue with the left border color not functioning in JavaScript

Attempting to alter the border-left-color property using this script is resulting in a Uncaught SyntaxError: Unexpected token -. Is border-left-color actually supported? Javascript function logoChange() { var description = new Array (); description[0] ...

javascriptjqueryhtmlcss

Utilize the context API to efficiently share information from the parent to both its children and sibling children

I'm currently working on displaying fetched data in a child component using the context API, but encountering an error in the browser: TypeError: render is not a function The above error occurred in the component: in AppDataList (at App.j ...

javascriptreactjs

How to correctly position a modal in a React application using CSS

Currently, I am working on integrating the react-modal NPM library into a React Typescript project. The issue I am facing is that the modal occupies the entire width of the screen by default, with padding included. My goal is to have it display as a small ...

cssreactjs

What is the best method to retrieve information from two tables on a webpage that have identical classes?

I am facing a challenge in retrieving or selecting data from two different tables that share the same class. My attempts to access this information using 'soup.find_all' have proven to be difficult due to the formatting of the data. There are m ...

pythonhtmlseleniumselenium-webdriverbeautifulsoup