Start CSS3 Animation Automatically

I am working on a multi-page website with a slider that includes a CSS3 animation featuring the famous rocket animation.

Here is the code snippet I used:

#outerspace {
  position: relative;
  height: 400px;
  background: #fff;
  color: #fff;
}
div.rocket {
  position: absolute;
  bottom: 10px;
  left: 20px;
  -webkit-transition: 3s ease-in;
  -moz-transition: 3s ease-in;
  -o-transition: 3s ease-in;
  transition: 3s ease-in;
}
div.rocket div {
  width: 92px;
  height: 215px;
  background: url('https://i.sstatic.net/nxion.gif') no-repeat;
  -webkit-transition: 2s ease-in-out;
  -moz-transition: 2s ease-in-out;
  -o-transition: 2s ease-in-out;
  transition: 2s ease-in-out;
  -webkit-animation: bounceIn 2s;
}
#outerspace:hover div.rocket {
  -webkit-transform: translate(0px, -5400px);
  -moz-transform: translate(0px, -5400px);
  -o-transform: translate(0px, -5400px);
  -ms-transform: translate(0px, -5400px);
  transform: translate(0px, -5400px);
}
<div id="outerspace">
  <div class="rocket">
    <div></div>
    BoneOS
  </div>#outerspace
</div>

Is there a way to automatically start the animation when the slide changes?

https://i.sstatic.net/nxion.gif

javascriptjquerycssanimation

Answer №1

To initiate the animation, the plan is to activate the class by adding it to the outerspace division instead of relying on hover as shown below:

#outerspace.active div.rocket {
  -webkit-transform: translate(0px, -5400px);
  -moz-transform: translate(0px, -5400px);
  -o-transform: translate(0px, -5400px);
  -ms-transform: translate(0px, -5400px);
  transform: translate(0px, -5400px);
}

Then, use addclass and removeclass in jQuery to trigger it. Remember to use a timeout function to allow for the transition to take effect before removing the class.

$("#outerspace").addClass("active");

setTimeout(function() { 
    $("#outerspace").removeClass("active"); 
}, 1000);

If there was uncertainty about how to handle the rocket within this context, the provided codepen link demonstrates triggering the rocket when switching slides. A simple slider was utilized since the specifics were not specified:

http://codepen.io/saa93/full/BQNXJd

Answer №2

If you're looking for a way to add animations to your website without the need for JavaScript or jQuery, CSS3 animations are the way to go. They are supported by most modern browsers.

Here's a helpful JSFiddle to get you started with implementing CSS3 animations in your slider.

Check out this simple example:

/* Define a keyframe with a name */
@keyframes rocket {
  from {
    transform: translate(0px, 0);
  }
  to {
    transform: translate(0px, -250px);
  }
}

div.rocket {
  position: absolute;
  bottom: 10px;
  left: 20px;
  -webkit-transition: 3s ease-in;
  -moz-transition: 3s ease-in;
  -o-transition: 3s ease-in;
  transition: 3s ease-in;
  
  /* Apply animation properties */
  animation-name: rocket;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

View the working snippet below:

#outerspace {
  position: relative;
  height: 400px;
  background: #fff;
  color: #fff;
}
div.rocket {
  position: absolute;
  bottom: 10px;
  left: 20px;
  -webkit-transition: 3s ease-in;
  -moz-transition: 3s ease-in;
  -o-transition: 3s ease-in;
  transition: 3s ease-in;
  -webkit-animation-name: rocket;
  -webkit-animation-duration: 3s;
  animation-name: rocket;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
div.rocket div {
  width: 92px;
  height: 215px;
  background: url('https://i.sstatic.net/nxion.gif') no-repeat;
}
#outerspace:hover div.rocket {
  -webkit-transform: translate(0px, -250px);
  -moz-transform: translate(0px, -250px);
  -o-transform: translate(0px, -250px);
  -ms-transform: translate(0px, -250px);
  transform: translate(0px, -250px);
}
@-webkit-keyframes rocket {
  from {
    -webkit-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -o-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    transform: translate(0px, 0);
  }
  to {
    -webkit-transform: translate(0px, -250px);
    -moz-transform: translate(0px, -250px);
    -o-transform: translate(0px, -250px);
    -ms-transform: translate(0px, -250px);
    transform: translate(0px, -250px);
  }
}
@keyframes rocket {
  from {
    -webkit-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -o-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    transform: translate(0px, 0);
  }
  to {
    -webkit-transform: translate(0px, -250px);
    -moz-transform: translate(0px, -250px);
    -o-transform: translate(0px, -250px);
    -ms-transform: translate(0px, -250px);
    transform: translate(0px, -250px);
  }
}
<div id="outerspace">
  <div class="rocket">
    <div></div>
    BoneOS
  </div>#outerspace
</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

Encountering difficulties with showing contact images in phonegap using angularjs

In my project, I encountered an issue where I can fetch and display the contact photo using simple HTML and JavaScript. However, when I attempt to do the same using AngularJS model, I encounter an error. Below is the code snippet that I am struggling with: ...

javascriptandroidangularjscordovacontact-list

Implementing a CSS stylesheet that is triggered when the user reaches the top of the webpage, and incorporating an

Currently, I have code that controls the hiding and showing of my navigation menu when a user scrolls up on the page. $.fn.moveIt = function(){ var $window = $(window); var instances = []; $(this).each(function(){ instances.push(new moveItItem($( ...

javascriptjqueryhtmlcss

The problem with clearing floats in IE7 (as well as 6)

Currently, I am facing an issue where I have a list that I want to split into three columns by using the float left property and then clearing the first column. Everything seems to be working fine in IE8 and FF, however, IE7 is causing the second column t ...

cssinternet-explorer-7

I'm having some trouble with my jQuery.get() function in the javascript Saturday(), can anyone help me figure out what I'm doing wrong?

Can anyone help me troubleshoot my jQuery.get() method in the saturday() JavaScript function? Here is the code snippet I have been working on. This is what I have in my index.html file: <html> <head> <title>jVectorMap demo</title> ...

javascriptjqueryhtmlajaxhighcharts

Unable to switch between navigation items and icons

Currently, I am in the process of learning vanilla JavaScript and I'm trying to incorporate a navigation feature similar to when the hamburger icon is clicked. However, I have encountered an issue where I cannot toggle the hamburger icon to change it ...

javascripthtml

Creating a square shape in Twitter Bootstrap to frame an item on a webpage

I've been working on creating a webpage that looks similar to the image provided. I've managed to get about 90% of it done, but there are a couple of issues I'm facing: How can I create a square with a triangle at the bottom as shown in th ...

javascripttwitter-bootstrapcsstwitter-bootstrap-3ionic-framework

Transforming two child arrays within an object into a single array using Ramda

I am looking to transform an object into an array. The object I have is structured like this: const data = { t1: [ {"a": 1, "a1": 2}, {"b": 3, "b1": 4}, {"c": 5, "c1": 6} ], t2: [ {" ...

javascriptarraysjsontypescriptramda.js

Is it possible to use Jquery to search through a many-many MySql database using checkboxes?

As I continue to learn and develop my search system, I've hit a roadblock with a particularly challenging question. In my database, I have a many-many relation of events. Each event can be associated with multiple music styles stored in the events_mu ...

phpjquerymysql

"Click to view the latest data visualization using the Chart.js

I am exploring ways to enhance the animations in Chart.js for a new web project. The content is organized in tabs, with the chart displayed on the third tab out of four. Currently, the chart animates upon loading. How can I make it so that when #chartTrig ...

javascriptjquerycsschartschart.js

Express js is failing to deliver static assets

Hello, I'm having an issue with Express Js. It seems like a beginner problem - static files are not being served properly. const express = require('express'); express() .set('view engine','ejs') .use(express.stat ...

javascriptnode.jsexpress

Resolve the issue with automatically generating SCSS type definitions (style.d.ts) for Preact within a TypeScript webpack setup

Utilizing webpack with Preact 10.x (nearly identical to React) and TypeScript in the VSCode environment. Following an update from Node version 12 to version 14, there seems to be a problem where *.scss files no longer automatically generate their correspo ...

javascriptreactjstypescriptwebpackpreact

Using Elasticsearch's bulk feature to set unique identifiers(_id) for documents

Whenever I attempt to insert documents into elasticsearch with a set _id, I encounter the following error: The field [_id] is considered a metadata field and cannot be included within a document. It should be utilized in the index API request parameters in ...

javascriptnode.jselasticsearch

The CSS elements are positioned beneath the top border when applying a scale transformation within columns

I have a layout with 4 columns of images that I want to scale on mouse hover using the 'column-count' property. The first column works correctly, but the next three end up positioned under the upper border during the transformation. I've e ...

htmlcss

Ways to recycle a section of Javascript for multiple uses on a single page

As a newcomer to website building, I have a query regarding the usage of a JavaScript function designed for a slideshow. My one-page website comprises multiple slideshow units with their own divs, holders, and counters (e.g., 1/4). A JavaScript code contro ...

javascripthtmljqueryslideshowreusability

Is there a way to refresh the animation on dougtesting.net?

I'm working with the dougtesting.net library to create a spinning wheel. I've been trying to figure out how to reset the animation once it finishes, but I can't seem to find any information on it. My goal is to completely clear all states so ...

javascripthtmljquerycssvue.js

Updating certain fields in AngularJS with fresh data

I am facing a challenge with the following code snippet: <div ng-controller="postsController"> <div id = "post_id_{{post.postid}}" class = "post" ng-repeat="post in posts"> ...... <div class="comments"> < ...

javascripthtmlangularjs

A guide on integrating functions into dynamically created buttons using the DOM

Is there a way to add functionality to the button labeled "CLICK ME TO EDIT"? I'm looking for some ideas on how to do this. var comment = prompt("Type content for new paragraph here", ""); var newParagraph = document.createElement('p'); new ...

javascripthtml

What is the best way to append something to the textContent property of an HTML tag within a markup page?

While working on resolving an XSS vulnerability in the jqxGrid where the cell content is rendered as HTML, I encountered a scenario like this: <a href="javascript:alert('test');">Hello</a>. To address this issue, I am exploring ways t ...

javascriptangularjqxgridjqxwidgets

Node.js and Express: tackling the problem of duplicate variables

I have a checkUser middleware that saves the user information when a JWT is verified. However, when I integrate it into my routes and attempt to log res.locals.user.username, the username appears twice in the console. This duplication is causing issues wit ...

javascriptnode.jsexpress

Sending a message in the DELETE route using express.js

I'm having trouble displaying a message after deleting a user. I attempted to use req.session properties and then retrieve them in the GET route, but they seem to not be available. Can anyone suggest a solution for fixing this code? router.get("/", ...

javascriptjquerynode.jsexpress