What is the best way to stack animations in CSS and HTML?

I need help figuring out how to layer two different animations on my website. Specifically, I want to create an effect where twinkling stars are in the background with a moving moon animation layered on top of them. However, when I try to implement this, the moon animation covers up the stars and is not positioned correctly. As a beginner in HTML, I would appreciate any guidance or suggestions. Thanks in advance!

@keyframes moon {
  0% {
    box-shadow: -150px 0px 0px 0px white;
    transform: rotate(-10deg);
  }
  50% {
    box-shadow: 0px 0px 0px 0px white;
  }
  100% {
    box-shadow: 150px 0px 0px 0px white;
    transform: rotate(10deg);
  }
  z-index: -1;
  position: relative;
}

@keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-webkit-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-moz-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-ms-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

.stars,
.twinkling {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.stars {
  background: #000 url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
  z-index: -1;
}

.twinkling {
  background: transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
  z-index: 0;
  -moz-animation: move-twink-back 200s linear infinite;
  -ms-animation: move-twink-back 200s linear infinite;
  -o-animation: move-twink-back 200s linear infinite;
  -webkit-animation: move-twink-back 200s linear infinite;
  animation: move-twink-back 200s linear infinite;
}

html {
  z-index: -1;
  position: relative;
  background-image: linear-gradient(black 80%, #041931, #fff);
  background-repeat: no-repeat;
  height: 45%;
}

body {
  font-family: 'Manrope', sans-serif;
  background: none;
}

div {
  background: none;
  z-index: 1;
}

.moon {
  z-index: -1;
  position: relative;
  width: 10rem;
  height: 10rem;
  background: #0a0a0a;
  margin: 1rem auto;
  animation: moon 20s linear infinite alternate;
  border-radius: 50%;
  box-shadow: inset -10rem 0 whitesmoke;
  transform: rotate(-10deg);
}
<html>
<style>
  div {
    margin: 10%;
  }
</style>

<body>
  <h1 id="text">
    <center> Welcome to my Site! </center>
  </h1>
  <div class="moon"></div>
  <div class="stars"></div>
  <div class="twinkling"></div>
  <div class="maintext">
    <h2>This is text below the animations</h2>
  </div>
  <script type="text/javascript">
    setTimeout(function() {
      $('.moon').css("animation-play-state", "paused");
    }, 20000)
  </script>
</body>

</html>

javascripthtmljquerycssanimation

Answer №1

Instead of applying the z-index to all elements, I corrected the positioning by removing it from unnecessary parts and only including it in the relevant sections such as moon, stars, and twinkling.

I also eliminated the margin that was set on the div elements. It is recommended to view the demo in full-screen mode for a better experience.

@keyframes moon {
  0% {
    box-shadow: -150px 0px 0px 0px white;
    transform: rotate(-10deg);
  }
  50% {
    box-shadow: 0px 0px 0px 0px white;
  }
  100% {
    box-shadow: 150px 0px 0px 0px white;
    transform: rotate(10deg);
  }
  position: relative;
}

@keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-webkit-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-moz-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-ms-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

.stars,
.twinkling {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.stars {
  background: #000 url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
  z-index: -3;
}

.twinkling {
  background: transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
  -moz-animation: move-twink-back 200s linear infinite;
  -ms-animation: move-twink-back 200s linear infinite;
  -o-animation: move-twink-back 200s linear infinite;
  -webkit-animation: move-twink-back 200s linear infinite;
  animation: move-twink-back 200s linear infinite;
  z-index: -2;
}

html, body {
  font-family: 'Manrope', sans-serif;
  height: 100%;
}

.moon {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: #0a0a0a;
  margin: 1rem auto;
  animation: moon 20s linear infinite alternate;
  border-radius: 50%;
  box-shadow: inset -10rem 0 whitesmoke;
  transform: rotate(-10deg);
  z-index: -1;
}

#text, .maintext { color: white; text-align: center; margin-top: 25px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<style>

</style>

<body>
  <div class="header">
    <h1 id="text">
      <center> Welcome to my Site! </center>
    </h1>
  </div>
  <div class="animation-part">
    <div class="twinkling"></div>
    <div class="moon"></div>
    <div class="stars"></div>
  </div>
  <div class="maintext">
    <h2>This is text below the animations</h2>
  </div>
  <script type="text/javascript">
    setTimeout(function() {
      $('.moon').css("animation-play-state", "paused");
    }, 20000)
  </script>
</body>

</html>

Answer №2

If you're facing an issue, try adjusting the z-index and CSS properties mentioned below.

@keyframes moon {
  0% {
    box-shadow: -150px 0px 0px 0px white;
    transform: rotate(-10deg);
  }
  50% {
    box-shadow: 0px 0px 0px 0px white;
  }
  100% {
    box-shadow: 150px 0px 0px 0px white;
    transform: rotate(10deg);
  }
  z-index: -1;
  position: relative;
}

@keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-webkit-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-moz-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-ms-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

html {
  background-image: linear-gradient(black 80%, #041931, #fff);
  background-repeat: no-repeat;
  height: 45%;
}

body {
  font-family: 'Manrope', sans-serif;
  background: none;
  color: #fff;
  position: relative;
  margin:0;
  padding:0;
}

.stars,
.twinkling {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.stars {
  background: #000 url(http://www.script-tutorials.com/demos/360/images/stars.png) top center;
  background-size: cover;
  z-index: -1;
  width: 100%;
}

.twinkling {
  background: transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
  z-index: -1;
  -moz-animation: move-twink-back 200s linear infinite;
  -ms-animation: move-twink-back 200s linear infinite;
  -o-animation: move-twink-back 200s linear infinite;
  -webkit-animation: move-twink-back 200s linear infinite;
  animation: move-twink-back 200s linear infinite;
}

.moon {
  z-index: 1;
  position: relative;
  width: 10rem;
  height: 10rem;
  background: #000000;
  margin: 1rem auto;
  animation: moon 20s linear infinite alternate;
  border-radius: 50%;
  box-shadow: inset -10rem 0 whitesmoke;
  transform: rotate(-10deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1 id="text">
    <center> Welcome to my Site! </center>
  </h1>
  <div class="moon"></div>
  <div class="stars"></div>
  <div class="twinkling"></div>
  <div class="maintext">
    <h2>This is text below the animations</h2>
  </div>
  <script type="text/javascript">
    setTimeout(function() {
      $('.moon').css("animation-play-state", "paused");
    }, 20000)
  </script>
</body>
</html>

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

Guide to transmitting HTML form information to a different web server with the click of a button

I operate two distinct web servers. One is responsible for the front-end (example.com), and the other manages the back-end (api.example.com). On my front-end server (example.com), there is a simple HTML website with a form that includes an input field and ...

htmlnode.jsfrontend

An error was encountered involving an unexpected token < at the beginning of a JSON file while using express with firebase

After setting up an authentication system in express using firebase auth, I established an endpoint in my express server: app.post('/users/login', (req, res) => { console.log('logging in...'); firebase.auth().signInWithEmail ...

javascripthtmlfirebaseexpress

I'm confused why this particular method within a class is not being inherited by the next class. Rather than seeing the expected extension, I am presented with - [Function (

Working fine with the Person class, the register() function displays the correct return statement when logged in the console. However, upon extending it to the Employee class, instead of the expected return statement, the console logs show [Function (anon ...

javascripttypescripttypescript-class

Guide on hiding a div element when clicked outside of it?

How can I create a dropdown feature in Khan Academy where it disappears when clicked outside but stays visible when clicked inside, using JavaScript/CSS/HTML? The current implementation closes the dropdown even on internal clicks. The code includes an even ...

javascripthtmlcsskhan-academy

Attempting to align HTML lines in a more compact manner

I can't seem to figure this out - I'm trying to stack three lines of text (one small, one big, one small) with single-spacing between them. However, no matter what I try, the larger font line always ends up with a double-space above it (for examp ...

htmlspacing

Interacting between my React Native client and server.js

Currently, I am developing a project that utilizes react native, express, and MongoDB. My challenge lies in establishing communication between the react-native-js file and the node-js file. Specifically, when the submit button is clicked, I aim to pass a ...

javascriptnode.jsreactjsreact-nativebackend

Creating an HTML Form Dropdown List that Redirects Users

As a budding web developer, I am in the process of creating a simple website. I have a query regarding how to extract a value from a drop-down list form in HTML, click the submit button, and get redirected to a new page based on the selection made. Specifi ...

htmlcss

Display WordPress post content within a specific div element

My Wordpress site has a unique homepage design featuring a div on the left showcasing the titles of the five most recent posts. Adjacent to that is an empty div on the right with a scroll bar. I am in search of a solution whereby clicking on any post tit ...

jqueryajaxwordpresshtml

Jquery toggle exhibits a delayed response time

I have implemented a jQuery toggle, which can be viewed here: http://jsfiddle.net/Rua4j/ Currently, the hidden content is shown only when I click the toggle button. However, I would like it to also appear when I click on the title. How can I achieve this ...

javascriptjqueryjquery-ui

Display loading icon in AngularJS during template retrieval

Imagine I have this specific directive: angular .module('app.widgets') .directive('myCalendarRange', myCalendarRange); function myCalendarRange () { var directive = { link: link, templateUrl: '/template/is/located ...

javascriptangularjs

`The search bar and search button`

On mobile, I have a search field and a button working fine. However, when typing in something and hitting "search" on the phone's keyboard, it leads to a 404 error. But clicking the "search" button works as expected. I would like to be able to hit "se ...

phphtmlcss

Techniques for looping through a PHP array using JavaScript

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Attendance Manager - Home</title> ...

javascriptphparraysserver

The Vue app utilizing Flickr API encounters an issue: "Unable to assign value to 'data' property as it is undefined."

Beginning the development of a simple one-page photo stream app using the public Flickr stream, I've encountered an error in my code: 'Cannot set property 'data' of undefined'. Here is a snippet of my code: <b-container> ...

javascriptvue.jsvuejs2jsonp

Aligning the up and down vote buttons in Bootstrap for small screens

I'm currently working on implementing a voting system similar to that of Stack Overflow. However, I'm facing an issue with displaying the arrows on smaller screens. I want the arrows to be positioned next to the text, just like on StackOverflow. ...

csstwitter-bootstrapbootstrap-4

Delete a character from a string in JavaScript by targeting a specific position starting from the end

I've been grappling with a problem involving removing a specific character at a known position from the back of a string. Here's the situation: Currently, I have strings like: 'RX8567' 'A8532' '18256' I want to de ...

javascript

Identify and extract all HTML content enclosed within two specified tags, then save them in a JavaScript object

I have a similar setup in my HTML code: <div class ="personal-datas">Data1</div> <h2 class ="name">John Doe</h2> <div class ="date-of-birth">January 1st, 2000</div> <h3 class ="company">ABC Corp</h3> <h ...

javascriptjqueryhtmljsonparsing

How can I choose a user based on the department selected in a dropdown list in CakePHP using the onchange event

My goal is to create a dynamic view that links two tables, 'user' and 'department'. The 'department' table has fields for id and name. I want to implement a feature where selecting a department name from a dropdown list trigge ...

javascriptjqueryajaxcakephpcakephp-2.0

Optimizing web design with Chrome's developer tools for varying screen resolutions

Recently, I was working on a responsive website and encountered an issue that I can't quite pinpoint. When using the Chrome website developer tool to resize the screen to a smartphone resolution, I noticed some strange behavior at times. It's har ...

htmlcssgoogle-chromewebresponsive-design

pre-show event

Within my single page jquery mobile application, I am utilizing $('#div').on('pageshow', function(){}) to fetch data for certain pages from a JSON web service (for others, I use pageinit which doesn't need to reload each time it&ap ...

jqueryjquery-mobile

What is the reason behind having several node modules directories within every project?

I'm just starting out with JS development and I have a question about the size of node modules. It seems that when many projects accumulate, we end up having to delete the node_modules folder because it takes up so much space. So, why isn't there ...

javascriptnode.jsnpmnode-modules