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

Implementing ngFor to Iterate Through a JSON Object in Angular 6

Iterate through the object list retrieved from a JSON object Here is the JSON object that I have fetched: { "0": { "0": null, "1": "Consolidated Statements of Changes in Stockholders\u2019 Deficit", "2": null, "3": "", "4": "" ...

javascriptangularangular6angular7

Geocomplete Plugin without Google Branding

I've implemented the jQuery Geocomplete Library. This is what I have accomplished so far- $(function() { $("#find_product_location").geocomplete( { map: "#product_location", mapOptions: { mapTypeId : 'roadmap',//roadmap, satellite,hybrid ...

javascriptjquerygoogle-mapsgoogle-maps-api-3geocomplete

material-ui DropDown with an image displayed for the selected value

Can someone help me figure out how to display an image in my material-ui dropdown menu? I'm currently using version 0.19.1 and have written the following code: <DropDownMenu autoWidth style={{ width: 500, marginBottom: 30 }} underlin ...

javascriptreactjsmaterial-ui

Accessing AngularJS variable scope outside of a function

Utilizing a socket, I am fetching data into an angularJS controller. $rootScope.list1= ''; socket.emit('ticker', symbol); socket.on('quote', function(data) { $rootScope.list1 = angular.fromJson(data.substring(3)); //I can ...

javascriptangularjssocket.io

Retrieve a key based on a selected value from a PHP array using jQuery

I'm having trouble figuring out how to sync a select dropdown state field in a user registration plugin on my WordPress site with the billing_state field in WooCommerce. The select dropdown has an array of states, but WooCommerce uses state abbreviati ...

phpjquerywordpresswoocommerce

Enrolling JavaScript documents and connected inline programming

I need a solution for dealing with two arrays. The first array consists of URLs pointing to JavaScript files that I want to register using $.getScript(url); Next, the second array contains inline JavaScript commands that should be registered with $("html ...

javascriptjqueryajax

Send an AJAX request to the server without waiting for a response using a JavaScript variable

My click counter is not sending variables to the server. I have tried finding examples on how to do this, but no matter what I attempt, the data is not being sent to the server. It seems like using AJAX would be the best option, but I must be doing someth ...

javascriptphpajax

Opacity filter malfunctioning

It seems that the filter: opacity property is not functioning as expected in IE8. Despite having used it successfully before, I am currently facing issues with its implementation. Strangely enough, Firebug does not display the filter rule at all; only norm ...

cssinternet-explorer-8opacity

Can you tell me the specific location in the CSS where this logo image is defined?

I've been working on a website at http://onofri.org/WP_BootStrap/ and I'm facing an issue. When using FireBug, I can't seem to locate where in the CSS the image logo.png is defined (this is the small image in the upper-left corner of the the ...

htmlcssxhtml

Spacing between hidden checkboxes and their labels

I've customized some checkboxes to resemble a select dropdown by hiding the input and using only the label as the visible element. However, I'm struggling to add margin between the elements, which seems to work only when the checkbox is visible. ...

htmlcsscheckboxinputmargin

Having difficulty retrieving data despite providing the correct URL

I am encountering an issue with a fetch function designed to retrieve a JSON web token. Despite verifying the correctness of the URL, the function is not functioning as expected. Below is the front-end function: const handleSubmit = async (e) => { ...

javascriptnode.jsreactjsnext.js

Using globs to specify files for gulp.src

I'm facing a challenge in setting up a glob array for my JavaScript concatenation build task within the Gulp workflow. The file structure I am working with looks like this: ├── about │ └── about.js ├── assets ├── contact â ...

javascriptnode.jsgulpglobminimatch

When accessing req.user in code not within a router's get or post method

Is there a way for me to access the data in the User schema outside of a post or get request? I am asking this because I would like to use this information elsewhere. The user schema is defined as follows: const mongoose = require('mongoose'); c ...

javascriptmongodbexpress

Wait for animation to finish before executing ajax call in jQuery

When I upload a spreadsheet to import data into my database, I perform server-side validation on each value before insertion. Using jQuery AJAX, the file is uploaded to the server, and I receive back processed data in the form of a multidimensional array. ...

jqueryajaxjquery-animateprogress-barjquery-deferred

Two flexible-sized containers placed side by side, with an ellipsis displayed on the left container

Can you achieve a layout where two elements are inside a container and float side-by-side? The right element should adjust its size based on the content while the left element fills the remaining space in the container with an ellipsis to truncate overflow ...

htmlcssdynamicellipsis

Enhancing websites with font-awesome icons and upgrading from older versions to the latest

Seeking guidance on updating our project to use the latest Macadmine theme. The transition from Font Awesome 3 to Font Awesome 4 requires changing all icons to their proper names. I came across a helpful resource at https://github.com/FortAwesome/Font-Aw ...

cssangularjsfont-awesome

Purge precise LocalStorage data in HTML/JavaScript

How can a specific item in the localStorage be cleared using javascript within an html file? localStorage.setItem("one"); localStorage.setItem("two"); //What is the method to clear only "one" ...

javascripthtml

Take out the username field from the registration form in Woocommerce

Is there a way to eliminate the username section from the registration form on woocommerce? I attempted to remove certain lines from the woocommerce/myaccount/login-form.php <?php if ('no' === get_option( 'woocommerce_registration_gene ...

phphtmlwoocommerce

Exploring the varying treatment of the noscript tag across different web browsers

I've been searching everywhere, but I can't find any information on this topic. What I really want to understand is what browsers do with the content inside a noscript tag when JavaScript is enabled. Let's consider an example: According t ...

javascripthtmlcsscross-browsernoscript

Having trouble with MUI auto import suggestions in my Next.js 13 project on VS Code

I'm currently developing a project using Next.js 13 and have installed MUI. However, I am encountering an issue where VS Code is not providing auto imports from the @mui/material library, as shown in the attached screenshot. https://i.stack.imgur.com ...

javascriptreactjstypescriptnext.jsmaterial-ui