Spinning and disappearing gradually over a set period of time

Could someone please help me with creating an animation for one of my CSS DIVs? I want it to have an exit/entry effect with rotation/fadeout and then rotation/fadein, with a 10-minute delay between each iteration.

I'm not sure if this can be achieved purely with CSS, or if I need to incorporate JavaScript for the complete animation. Unfortunately, JavaScript is not my strong suit.

Here is the code for the DIV that I am working with:

@import url(https://fonts.googleapis.com/css?family=Lobster);

body {
  font-family: 'Lobster', cursive;
}
.circle {
  margin: auto;
  height: 150px;
  width: 150px;
  border-radius: 100%;
  background: #c4af7f;
  margin-top:20px;
}

h1 {
  color: #D5E2D6;
  text-align: center;
  line-height: 40px;
  margin-top: -170px;
  -moz-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
-webkit-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
-o-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
-ms-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  
  /* Text shadow properties */
  text-shadow: ...;

}

/* Styling for spans within h1 */
span:nth-child(1), span:nth-child(7) { 
font-size: 30px;
}

span:nth-child(2), span:nth-child(3), span:nth-child(5)  {
  font-size: 55px;
}
<div class="circle"></div>
  <h1><span>La</span><br/><span>Matinale</span><br/><span>Simulation</span></h1>

Your assistance would be greatly appreciated!

htmljquerycssanimationcss-animations

Answer №1

Below is a solution that utilizes jQuery.

$(function() {
  setTimeout(function() {
    $('.logo').animate({
      deg: 360
    }, {
      duration: 1200,
      step: function(now) {
        $(this).css({
          transform: 'rotate(' + now + 'deg)'
        });
      },
      done: function() {
        $(this).fadeOut("slow");
      }
    });
  }, 1000);
});
@import url(https://fonts.googleapis.com/css?family=Lobster);
body {
  font-family: 'Lobster', cursive;
}
.circle {
  margin: auto;
  height: 150px;
  width: 150px;
  border-radius: 100%;
  background: #c4af7f;
  margin-top: 20px;
}
h1 {
  color: #D5E2D6; 
  text-align: center;
  line-height: 40px;
  margin-top: -170px;
  /*Transform properties*/
  -moz-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  -webkit-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  -o-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  -ms-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  /*Text shadow effect*/
  text-shadow: 1px 1px #93612E, 2px 2px #93612E, 3px 3px #93612E, 4px 4px #93612E, 5px 5px #93612E, 6px 6px #93612E, 7px 7px #93612E, 8px 8px #93612E, 9px 9px #93612E, 10px 10px #93612E, 11px 11px #93612E, 12px 12px #93612E, 13px 13px #93612E, 14px 14px #93612E, 15px 15px #93612E, 16px 16px #93612E, 8px 8px #93612E, 9px 9px #93612E, 9px 9px #93612E, 10px 10px #93612E, 10px 10px #93612E, 11px 11px #93612E, 11px 11px #93612E, 12px 12px #93612E, 12px 12px #93612E, 16px 16px 3px #06520C;
}
span:nth-child(1),
span:nth-child(7) {
  font-size: 30px;
}
span:nth-child(2),
span:nth-child(3),
span:nth-child(5) {
  font-size: 55px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="logo">
  <div class="circle"></div>
  <h1><span>La</span><br/><span>Matinale</span><br/><span>Simulation</span></h1>
</div>

By wrapping the logo element, we can animate a rotation of the logo followed by a fade out effect.

For more information, visit: https://api.jquery.com/animate/

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

Utilizing an overlay to conceal both the body content and the input fields

I have a website that includes a sliding overlay div which triggers when the user exits a specific area. To showcase this, I created a demonstration on jsfiddle. http://jsfiddle.net/qxcd8y1L/ <body class="overlay"> <input> </body> ...

jqueryhtmlcss

Is it possible to dynamically choose between GET and POST methods for an AJAX request?

Consider the following code snippet which intercepts the form submission event from two different forms. $("#aaa, #bbb").submit(function(e) { e.preventDefault(); var form = $(this); var url = form.attr('action'); $.ajax({ ...

javascriptjqueryajaxpostget

The CSS styles are not being rendered on the page

My simple static html/css project seems to be having trouble applying styles to the html elements in stackblitz. You can view the project here. I'm wondering if there might be an issue with linking the css file using the link tag, or perhaps it's ...

htmlcssstackblitz

Crafty Checkbox Selector [ leveraging jquery ]

I have created some fake checkboxes using elements like <span> after the real checkbox and they are working fine! However, I am having trouble counting the checked checkboxes when a checkbox is clicked. I have tried using methods like: $(".elm:chec ...

javascriptjqueryhtmlcss

How can I change the color of a designated column in a Google stacked bar chart by clicking a button?

I am in the process of creating a website that compares incoming students at my university across different academic years. We have successfully implemented a pie chart to display data for the selected year. Now, we aim to include a stacked bar chart next ...

javascripthtmlchartsgoogle-visualization

Using a PHP variable within an AJAX modal window: A step-by-step guide

The main page (main.php) is currently holding a variable called $var = "hello". A modal window (modal.php) is being loaded through AJAX utilizing the following script: var modal_xhr = $.ajax({ 'type' : 'GET', ...

javascriptphpjqueryajax

How to dynamically deactivate dates in a jQuery datepicker

For my current project, I need to implement a feature where the user can select a hotel, arrival date, and departure date. Upon selecting the hotel, I have to display the unavailable dates of the hotel in the jQuery datepicker as disabled. This is the Jav ...

jqueryajaxjquery-ui

Duplicate user scrolling input within a specified div container

I am attempting to recreate a horizontal scrolling effect on a div element that mirrors the input scroll. When the user scrolls along the input, I want the div element to scroll in sync. The issue I am encountering is specific to Chrome, where the input b ...

javascripthtmlcssgoogle-chromefirefox

Determining the total number of current connections using JavaScript, jQuery, and Selenium WebDriver

I need your assistance as I've encountered a roadblock. In my automated tests using Selenium WebDriver + Java, I rely on the following code snippet to check for active background AJAX connections: private boolean hasNoActiveConnections() { retur ...

javascriptjqueryselenium

Implementing pagination within a PHP foreach loop

I have a code snippet that fetches films from the database and organizes them by year, then displays each film for that particular year. However, my list of results is becoming too lengthy and I need to implement pagination. I haven't been able to fin ...

phpjquery

Prevent dropdown from having duplicate values

There are two dropdown menus available - one for Product 1 and the other for Product 2. The values in the dropdowns indicate the order of importance. For instance: https://i.sstatic.net/AByPZ.png If Order 1 is selected for Product 1, then Product 2' ...

jquery

One way to change the cursor CSS property is by dynamically altering it based on scrolling behavior. This involves modifying the cursor property when scrolling

I'm attempting to adjust the cursor property within an Angular function. The issue I'm facing is that when I begin scrolling the webpage, the cursor changes to a pointer, but when I stop scrolling, it remains as a pointer. I've attempted to ...

javascripthtmlcssangularjsangular

Obtain the current date and time from the server and transfer it to the client machine

With a setup consisting of 4-5 client machines and one server, I am looking to retrieve the date and time from the server only, excluding the clients' date and time. While DateTime.Now in c# and var date= new Date() in jQuery can be utilized to get th ...

jqueryasp.netasp.net-mvc-4

Adding and removing attributes with Jquery upon clicking a button

How can I make my listed items add an ID when clicked, or what am I doing incorrectly? $('.ex-menuLi #tt').attr('id', 'test'); $('.ex-menuLi').on('click', function(){ $(this).attr('id', &apos ...

javascriptjqueryhtmlcss

Troubleshooting issue: Click function not responding inside Bootstrap modal

Below is the JavaScript code for my click function $(".addPizza").on("click", function(event) { event.preventDefault(); console.log("hello") let userId = $("#userId").attr("data-id"); let pizzaRecipe = $('#pizza-recipe').val().trim(); ...

javascriptjqueryajaxbootstrap-4

jQuery registers the enter event, but does not proceed to trigger the enter action

Hey there, I've been experimenting with jQuery to capture the enter event. Something peculiar is happening though - after pressing enter in the text area, an alert pops up but the text gets entered only after that. Despite trying various solutions, I ...

javascriptjqueryhtml

Include a model attribute when making an AJAX POST request

I made an ajax POST call with JSON data and attempted to set a model attribute in the POST method, but unfortunately it doesn't seem to be working as expected. Here's the request in the controller: @RequestMapping(value="reubicar/idhu", method= ...

jqueryajaxspring-mvc

Troubleshooting JQuery AJAX HTML Problems in Google Chrome and Firefox

I'm facing an issue with my code and I'm not sure what to do. It works perfectly on Internet Explorer, but when I try to open it on Chrome or Mozilla, the links in my menu don't work! I click on them but nothing happens. Can someone please h ...

javascriptjqueryhtmlcssajax

Is it possible to achieve this using an alternate method such as CSS?

Currently, I am working on a function that will apply shadow effects to all buttons within a specific class when hovered over. However, due to the dynamic nature of the buttons created based on the data retrieved from the database, assigning individual IDs ...

javascriptjqueryhtml

CSS does not alter the properties of a link's "background-color" or "border-color"

I have successfully changed the text color of visited links, but I am struggling to change the "background-color" and "border-color" properties. The initial part of my internal style sheet includes a CSS reset. a:visited { color: red; background-col ...

htmlcsscolorshyperlink