Smooth Slide-in Animation

I've been working on improving my understanding of animations, but keyframes are still a bit confusing for me. To help with my learning process, I decided to create a simple box slider that fades in each layer and then repeats the process. My goal is to smoothly transition from one layer to another and keep the animation going.

Here is what I have so far:

HTML

<div class="index"></div>
<div class="index"></div>
<div class="index"></div>
<div class="index"></div>
<div class="index"></div>

CSS

div {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
}
div:first-of-type {
    background: red;
    animation-delay: 0s;
    opacity: 1 !important;
}
div:nth-of-type(2) {
    background: green;
    animation-delay: 5s;
}
div:nth-of-type(3) {
    background: blue;
    animation-delay: 10s;
}
div:nth-of-type(4) {
    background: yellow;
    animation-delay: 15s;
}
div:last-of-type {
    background: orange;
    animation-delay: 20s;
}
.index {
    animation: index 5s ease-in infinite;
}
@keyframes index {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

I am wondering how I can achieve the effect I desire?

Fiddle: http://jsfiddle.net/s2rxujkt/1/

Answer №1

You have the option to include a 3rd element:

@keyframes animation {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

http://example.com

Answer №2

To achieve the desired effect, it is essential to utilize the CSS z-index property in combination with a bit of JavaScript. A great example demonstrating this can be found at the following link: http://codepen.io/peterwestendorp/pen/LbiwD

By adding the 'fx' class via JavaScript and applying the following CSS styling, the desired result can be achieved:

.fx:first-child + div ~ div  {
    z-index:-1;
}

In addition, incorporating animations like the one outlined below can further enhance the visual appeal:

@keyframes index {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

We hope that this explanation proves helpful in achieving your desired outcome.

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

Displaying content conditionally - reveal a div based on user selection

I have a dropdown menu and need to determine whether to display a specific div using the value selected via v-if. <select class="custom-select custom-select-sm" id="lang"> <option value="1">English</option> <option value="2">Sv ...

The CSS style of the Div element is not being displayed properly when embedded with JavaScript

Currently, I am working on a simple page for practice purposes. The main issue I am facing is with a div element that has a red border and a blue background. Inside the div, there is a script tag calling an external JavaScript file. Surprisingly, the JavaS ...

What are some ways to ensure a JQM-created button is clickable in Firefox?

I am working on making a div clickable in a jQuery Mobile powered website. The current code I have functions properly in Chrome and Safari, however, it does not work in Firefox - both on desktop and Android FF. <button data-icon="eye"> <a href ...

Tips for eliminating the horizontal scrollbar in flexbox that is visible on Firefox and Internet Explorer

I've been working on a website and encountered an issue with horizontal overflow on Firefox and IE in the last section that contains 3 images, while Chrome seems to display it correctly without any overflow. I used a flexbox for the article area, assu ...

How can I use CSS in Next.js to style a child element when its parent is being hovered over?

Here is the CSS code that specifically targets the child element "#overlay" when its parent, ".collection", is being hovered over: .collection { position: relative; overflow: hidden; } .collection:hover #overlay { position: absolute; opa ...

Is there a way to ensure that all images are uniform in size and aligned in a row?

I have an upcoming exam covering various topics that the teacher and I worked on together today, with the exception of the photo tab. The teacher instructed me to submit it within a few days, completed in full. I have independently completed everything o ...

I possess a solitary div element that requires dynamic replication

I have a single container and an unspecified number of rows of data. I want to display this data on HTML cards that are generated dynamically based on the number of rows. For example, if there are 10 rows of data, I need to create 10 card elements with ea ...

When I click on the button, the page reloads instead of executing the essential code

On my website, there is a settings page where users can edit their profiles. After editing, they click the update button which triggers the updateProfileData function. This works smoothly in Chrome browser, but in Firefox, the page reloads as soon as the b ...

Correcting the 1 pixel spacing issue in 3 containers each with a width of 33.333%

It is difficult to articulate, but I am noticing a 1 pixel line with 3 containers each having a width of 33.3333%. Unfortunately, this is not something I can change as it is part of the material-ui framework. <div class="container"> <div clas ...

The hover and active effects are malfunctioning

I can't understand why the default color for the "a" element is set to #2bb673 instead of #222. What mistake did I make? I am also using Bootstrap. <div class="our-work"> <a href="#our-work" class="our-work">Our Work</a> ...

Aligning divs, prevent duplicate HTML within multiple divs

Currently, I am attempting to troubleshoot a jsfiddle issue. The main problem lies in my desire for the first two divs (with class="fbox") to be aligned next to each other on the same level. Furthermore, I am looking to enable dragging the image into the ...

Incorporating CSS styles into a dynamic JavaScript computation

I'm attempting to apply inline CSS to a JS calculation (e.g. 3*2*1) in order to make it appear red. I have experimented with using a span tag, but it only displays the calculation and not the result. I also tried utilizing an internal style sheet. Ho ...

Looking for a way to customize it using @emotion/styled? Dealing with the deprecated makeStyles from MUI problem?

I have been working on setting up my styling using @emotion since makestyles were removed in React 18. Despite making changes as per my research, I am not seeing any updates reflected on my page. The expected result looks like this: https://i.stack.imgur. ...

Get the index of the currently active element in jQuery, taking into account its position among its original sibling elements

I am implementing a function in jQuery to toggle an 'active' class on elements within a grid. Here is the code snippet: $(".cinema-seats .seat").on("click", function () { $(this).toggleClass("active"); } Essentially, when clicking on random ...

Here's a unique rewrite: "Learn how to manipulate the CSS class of a textarea element (specifically in NicEdit) by utilizing the addClass

I am currently validating a textarea using the NicEdit plugin. var getContent = nicEditors.findEditor("SubSliderDescription").getContent(); bValid = bValid && checkBlankTextArea(getContent, "SubSliderDescription") function checkBlankTextArea(o, ...

Eliminate the margin and padding on a floating table header

After scrolling, I am attempting to position the thead element. However, when changing the position from static to absolute, the element becomes offset with added margin and padding. This has led me to try using CSS to address the issue: To resolve this, ...

Is there a way to ensure certain items are displayed on different lines?

Currently, I am working on styling an HTML list with the following properties: font-weight: bold; padding: 0px; margin: 0px; list-style-type: none; display: block; width:700px; font-size: 14px; white-space: pre-wrap; The individual cells within this list ...

Enhance the appearance of specific wordpress usernames by adding a touch of "flair" next to them

I'm looking to add a special "flair" next to specific users on my WordPress website, similar to how YouTube distinguishes verified users. I have the CSS for changing the color on hover, but I need help keeping it positioned correctly. Examples from Y ...

Incorporate an image icon into an Angular grid

Currently, I am in the process of building a web application using Angular. The main goal is to create a grid and color specific cells based on data input. Below is the snippet of my HTML code: <mat-grid-list cols="10"> <mat-grid-tile * ...

Flexible Columns with Bootstrap

After completing the construction of my website, my current focus is on making it responsive. My inquiry pertains to a specific page on my site that consists of 8 containers with full viewport height. These containers are arranged into two equal columns ...