What's causing the issue with the rot-corona animation not functioning properly?

I am currently working on a project related to the coronavirus, and I am having trouble with the animation "rot-corona." I need it to rotate 360 degrees every 3 seconds. Please note that Bootstrap 4 is being used in this project.

Code

/* SCSS */

#rotate-corona-text {
  h1 {
    font-size: 3rem;
  }
  img {
    width: 100px;
    height: 100px;
  }
  #rotate-corona-text {
    img {
      animation: rot-corona 3s linear infinite;
    }
  }
}
<section id="main-header" class="py-4">
  <div class="container py-4">
    <div class="row border py-4 align-items-center justify-content-between">
      <div class="col-12 col-md-4  order-2 order-lg-1  " id="unity-images">
      </div>
      <div class="col-12 col-md-7 order-1 order-lg-2" id="rotate-corona-text">
        <h1 class="text-primary">Let's stay safe and fight against cor<span id="rotate-cororna"><img src="./assets/corona-icon.jpg"  alt=""></span>na </h1>
      </div>
    </div>
  </div>
</section>

The image I need to rotate can be found at https://ibb.co/qFSqkyq

cssbootstrap-4css-animationscss-transforms

Answer №1

  1. When SCSS is compiled, it results in the following CSS:
#rotate-corona-text h1 {
  font-size: 3rem;
}

#rotate-corona-text img {
  width: 100px;
  height: 100px;
}

#rotate-corona-text #rotate-corona-text img {
  animation: rot-corona 3s linear infinite;
}

It's important to note that the 3rd statement contains a multiple ID selector that doesn't target the intended element.

  1. It appears that you have forgotten to include @keyframes to define the animation that was declared for the img element.

Output:

#rotate-corona-text h1 {
  font-size: 3rem;
}

#rotate-corona-text img {
  width: 100px;
  height: 100px;
}

#rotate-corona-text img {
  animation: rot-corona 6s infinite; /* 6s because 50% is completed at 3s. */
}

@keyframes rot-corona {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(360deg); /* CSS does not offer animation-delay between iterations. This is a hack */
  }
  100% {
    transform: rotate(360deg);
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<section id="main-header" class="py-4">
  <div class="container py-4">
    <div class="row border py-4 align-items-center justify-content-between">
      <div class="col-12 col-md-4  order-2 order-lg-1  " id="unity-images">
      </div>
      <div class="col-12 col-md-7 order-1 order-lg-2" id="rotate-corona-text">
        <h1 class="text-primary">Lets stay safe and fight against Cor<span id="rotate-cororna"><!-- Transparent background for you --><img src="https://i.sstatic.net/9Wifk.png"  alt=""></span>na </h1>
      </div>
    </div>
  </div>
</section>

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

Struggling to align the push menu properly within the Bootstrap framework

I am currently utilizing Bootstrap as my UI framework and attempting to create a push menu on the left side of the page. While I have made progress towards achieving this goal, there are some bugs in the system that I am encountering. Specifically, I am ha ...

javascriptjqueryhtmlcsstwitter-bootstrap

Incorporating text overlays on images that are compatible with responsive websites is a top priority for me

This is a piece of HTML code that utilizes bootstrap 3 for design purposes. The challenge faced is related to positioning text over an image. When resizing the browser, the alignment of the text with the background gets disturbed. Assistance is needed in r ...

htmlcsstwitter-bootstrap-3bootstrap-modal

How to achieve a text border effect using inner glow technique

Can someone help me recreate this unique text design? The font used is Gill Sans MT and the text color is a shade of purple although it may be hard to discern. https://i.sstatic.net/HGrB8.png I have been struggling to achieve the vibrant thick border and ...

css

closing the space between rows at the top

Having trouble adjusting the top margin to match the left and right margins between items. How can I narrow the top gap so it aligns with the spacing of each bootstrap button? https://i.stack.imgur.com/1dZEC.jpg html <div ng-controller="RecipeCo ...

csstwitter-bootstrap

Achieving both vertical and horizontal center alignment specifically for mobile devices

Is there a way to center a column on mobile devices only while maintaining a fixed height for the section? <div class="" style="background-image: url(image url;); background-position: right bottom; background-size: cover; height: 462px;"> <div cl ...

twitter-bootstrapcssbootstrap-4center

What is the process for layering one image on top of another in HTML?

Don't miss checking out the amazing website wplayout.com. On the homepage, there is a stunning gallery that I want to enhance by adding a "premium" tag image on top of each picture. Currently, the premium image is displayed in the top right corner of ...

htmlcss

Utilizing multiple class names in Material UI with identical definitions

When working with traditional CSS, it is common to define shared properties between classes like this: .classA,.classB{ background-color: black; } In Material UI and using theming, the equivalent would be: styles = (theme)=>({ classA:{ ba ...

javascriptcssstylesmaterial-ui

Within the flask framework, I am experiencing an issue where paragraphs are being overwritten. My goal is to find a

Snippet of HTML: <div class="split left" > <div class="centered"> <div class="container"> <p>Hi!</p> </div> <div class="darker"> <p>{{message}}& ...

pythonhtmlcssflaskjinja2

Color overlay on top of image background

I'm struggling to create a striped colored background with a narrow center single color background on top for showcasing articles and photos. However, I am unable to get the colored background to display correctly. Despite trying different approaches ...

jqueryhtmlcssbackground

Centralized and secure masthead

Currently, I am focusing on showcasing my portfolio at www.bbellmedia.com/mywork The specific requirement I have is to center the text 'Bryan Bell' and ensure that it remains fixed even when the user scrolls. Can anyone suggest the most effecti ...

htmlcsspositioning

Steps to make a unique custom tooltip without using jQuery by utilizing the title attribute

I am looking to implement a tooltip similar to the one shown in the image. The value in the title tag is dynamic and fetched from the controller. https://i.sstatic.net/C2v3D.png Below is the code snippet of my table: <table border="1" cellpadding="10" ...

angularjshtmlcss

Building a website using Bootstrap: A step-by-step guide

Wondering how I can incorporate all the cool Bootstrap components into a webpage. Is there a tool that offers live preview? Back in the day (web 1.0), Dreamweaver was my go-to for creating HTML and basic CSS, but what are some current tools where I can si ...

htmlcsstwitter-bootstrap

Tips for concealing overlay when the cursor hovers

Can anyone help me with a code issue I'm having? I want to hide an overlay after mouse hover, but currently it remains active until I remove the mouse from the image. Here is the code: .upper {position: absolute; top: 50%; bottom: 0; left: 50%; tra ...

javascriptjqueryhtmlcss

Ensure that the assistant stays beneath the cursor while moving it

I am currently working on creating a functionality similar to the 'Sortable Widget', but due to some constraints, I cannot use the premade widget. Instead, I am trying to replicate its features using draggable and droppable elements: $(".Element ...

javascriptjqueryhtmlcssjquery-ui

Mastering the art of utilizing the LESS preprocessor with React Create-React-APP

Is it possible to implement the LESS preprocessor in my create-react-app project? In my React code, I have the following: ReactDOM.render( <form> <input type="email" data-info="Enter Email" pattern="/\S+@\S+\.\S+/ ...

cssreactjslesscreate-react-app

What is the proper way to define an element's style property in strict mode?

Assuming: const body = document.getElementsByTagName('body')[0]; const iframe = document.createElement('iframe'); iframe.src = protocol + settings.scriptUrl + a; iframe.height = 1; iframe.width = 1; iframe.scrolling = 'no'; ...

javascriptcss

python conducting automation tests with Selenium WebDriver on a mouse

Hello, I'm having trouble with opening the Mouser website and using the search bar to send some data. Below is a sample of the code I've been working on, but I can't seem to find the correct CSS selector. Any help would be greatly appreciate ...

pythoncssseleniumselenium-webdriverwebdriver

Chrome is failing to run the keyframe animation transform

This solution seems to function properly on Firefox and Safari, and even on IE! However, it encounters issues when used on Chrome. (It runs smoothly on Firefox and IE, but on Chrome the animation does not display at all!) @keyframes animationFrames{ 0% ...

cssgoogle-chromecss-animations

Is there a problem with the way divs are being displayed when using jQuery to show the first 12 elements with the class "hide-show"?

I am encountering a problem with displaying data using the jQuery slice() and show() methods to reveal dynamically generated divs from a PHP function. The code is as follows: <style> .hide-show { display :none; } </style> <div class="c ...

javascriptphpjquerycsscodeigniter

I would like the dropdown menu to only appear on mobile devices

After creating a dropdown menu, I now want it to only appear in mobile view and not in other views. I believe this can be achieved using "visible-xs" or a similar method, but I am struggling with the coding. Below is my HTML code: <nav class="navb ...

htmlcssbootstrap-4