Fan Animation in CSS

I have three unique images that I would like to animate in a fan-like manner consecutively.

I prefer not to merge the images in Photoshop, as I want them to be displayed one after the other.

Here is the code snippet (dummy images are used):

.bannerimg{
  position:relative;
}

.bannerimg img{
  position:absolute;
  max-width:500px;
}

.bannerimg .bannerhtml{
  -ms-transform: rotate(300deg); /* IE 9 */
  -webkit-transform: rotate(300deg); /* Chrome, Safari, Opera */
  transform: rotate(300deg);
  max-width:175px;
  left:50px;
  -webkit-animation: fadeIn 500ms ease-in-out 200ms both;
  animation: fadeIn 500ms ease-in-out 200ms both;
}

.bannerimg .bannercss{
  -ms-transform: rotate(63deg); /* IE 9 */
  -webkit-transform: rotate(63deg); /* Chrome, Safari, Opera */
  transform: rotate(63deg);
  max-width:170px;
  top:9px;
  left:227px;
  -webkit-animation: fadeIn 500ms ease-in-out 600ms both;
  animation: fadeIn 500ms ease-in-out 600ms both;
}

.bannerimg .bannerjs{
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
  max-width:175px;
  top:150px;
  left:135px;
  -webkit-animation: fadeIn 500ms ease-in-out 1000ms both;
  animation: fadeIn 500ms ease-in-out 1000ms both;
}

.windmill
{
  animation: spin-clockwise 1.25s linear 1200ms infinite;
  transform-origin: 30% 100%;
}

@keyframes spin-clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
<div class="bannerimg windmill">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerhtml" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannercss" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerjs" />
</div>

Check out the demo here: http://jsfiddle.net/wzht89r3/2/

The solution can also be implemented using jQuery or JavaScript.

javascriptjqueryhtmlcss

Answer №1

Is this what you were looking for? I made a slight adjustment to the transform-origin property in your .windmill class.

.bannerimg{
  position:relative;
}

.bannerimg img{
  position:absolute;
  max-width:500px;
}

.bannerimg .bannerhtml{
  transform: rotate(300deg);
  max-width:175px;
  left:50px;
  -webkit-animation: fadeIn 500ms ease-in-out 200ms both;
  animation: fadeIn 500ms ease-in-out 200ms both;
}

.bannerimg .bannercss{
  -ms-transform: rotate(63deg); /* IE 9 */
  -webkit-transform: rotate(63deg); /* Chrome, Safari, Opera */
  transform: rotate(63deg);
  max-width:170px;
  top:9px;
  left:227px;
  -webkit-animation: fadeIn 500ms ease-in-out 600ms both;
  animation: fadeIn 500ms ease-in-out 600ms both;
}

.bannerimg .bannerjs{
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
  max-width:175px;
  top:150px;
  left:135px;
  -webkit-animation: fadeIn 500ms ease-in-out 1000ms both;
  animation: fadeIn 500ms ease-in-out 1000ms both;
}

.windmill
{
  animation: spin-clockwise 1.25s linear 1200ms infinite;
  transform-origin: 220px 150px; /* Updated value */
}

@keyframes spin-clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
<div class="bannerimg windmill">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerhtml" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannercss" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerjs" />
</div>

Answer №2

In my opinion, removing the extra classes and utilizing the :nth-child pseudo-class would be a better approach. Setting individual offsets for each child element (e.g., top:150px; left:135px;) would require repositioning after every image change. Thus, I opted for an alternative positioning method.

To address the issue of incorrect image orientation, I switched to different images that align correctly with the rotation origin set at 0 0, which is positioned in the top-left corner.

To streamline the solution, I eliminated all vendor prefixes and fade-in transitions.

#windmill {
  animation: spin-clockwise 2s linear 1200ms infinite;
  transform-origin: 0 0;
  position: relative;
  top: 100px; /*Image dimensions*/
  left: 100px;
}
#windmill > * {
  position: absolute;
  transform-origin: 0 0;
}
#windmill > *:nth-child(1) {transform: rotate(0deg);}
#windmill > *:nth-child(2) {transform: rotate(120deg);}
#windmill > *:nth-child(3) {transform: rotate(240deg);}
@keyframes spin-clockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
<div id="windmill">
  <img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Arrow_Blue_UpperLeft_001.svg" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Arrow_Blue_UpperLeft_001.svg" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Arrow_Blue_UpperLeft_001.svg" />
</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

Align a div to the bottom of a column using Bootstrap 4 - Vertical Alignment

I'm working on a layout with two columns - one on the left and two on the right. How can I ensure that the last element in the right column aligns with the bottom of the left column? <!DOCTYPE html> <html lang="en> ... (Bootstrap core ...

htmlbootstrap-4

Issues with the display property

After setting the display of a div tag as none in the style property, I am trying to show it based on an on-click function. However, the issue I am facing is that when I click on the function, the div displays for a brief moment then disappears again. Ca ...

javascriptjqueryhtml

Struggling to retrieve Json data through Ajax in Rails 5

Hey there! I'm currently exploring the world of Rails action controllers with Ajax, and I've run into a bit of a snag. I can't seem to retrieve Json data and display it in my console.log using my Ajax function. The GET method works perfectly ...

javascriptjqueryruby-on-railsjsonajax

Struggling with overlaying Bootstrap modals on top of each other

This idea is inspired by the topic Multiple modals overlay I am working on developing a folder modal that allows users to either 1) open an existing file or 2) create a new file within each folder modal. To see how it functions, please run the code below ...

javascripthtmljquerycssbootstrap-5

Verify if a certain value is present within a nested array

I need assistance with checking if a specific value is present within a nested array. Here is an example of the data I am dealing with: [ { name: 'alice', occupation: ['Artist', 'Musician'], }, { ...

javascriptarraysreactjsdata-structures

The utilization of CSS within Flask can sometimes lead to a state

Struggling with a python Flask issue here and could really use some help. My CSS is completely out of whack and not displaying correctly at all. Despite setting everything up in static_files and seeing only a 304 code in the terminal, even when trying new ...

pythoncssflask

Having difficulty styling scrollbars using CSS

There is currently a scrollbar displaying over part of my page when necessary. https://i.stack.imgur.com/48Rbx.png I want to change the styling of the scrollbar to make it less bright and have a transparent background. I attempted to apply some styles, bu ...

css

Deleting an element from an array in JavaScript by its index

I'm currently working on a todo type app and I need to figure out how to remove an array element. Adding elements using element.push() is straightforward, but removing them is a bit more challenging. The remove button is nested within a template liter ...

javascriptarrays

How to ensure onmouseenter and onmouseleave work properly in Chrome using HTML, JavaScript, and jQuery

<div style="position: relative; left: 50px; top: 30px; width: 300px; height: 150px; background: #222222;" onmouseenter="this.style.background='#aaaaaa'" onmouseleave="this.style.background='#222222';"></div> http://jsfiddle ...

javascriptjqueryhtmlgoogle-chromemouseevent

The Firebase function that reloads the auth currentUser is not refreshing properly within a Vue component

My function for updating the profile URL using the reload method is not reflecting changes in my computed property. Computed Property computed: { photoUrl: function() { return firebase.auth().currentUser.photoURL; }, } Function onFileC ...

javascriptfirebasevue.jsvuetify.js

Creating an HTML document from JSON data is a straightforward process that involves parsing

My json object contains the following data: [ { "help": "Ensure ARIA attributes are provided", "nodes": [ { "all": [], "impact": "critical", "html": "<input id=\"chkPr ...

javascriptarraysjsonparsinghtml-table

Innovatively blending captivating visuals with informative text, our presentation seamlessly

I'm struggling to resolve a basic code issue and thought you might be able to assist me. Please have a look at the provided sample code on this page: <http://jsfiddle.net/UniqueUser/kkaYc/> As you can observe, when selecting images from the me ...

jqueryimagemenu

Create a screen divided into two separate sections using horizontal split dividers

Trying to figure out how to set a div in HTML and then have a second div take up the remaining space. It seems like it should be simple, but I'm struggling with it. I'd like to have a div with a fixed height and then have another div take up the ...

htmlcss

Ways to trigger the display of an image upon hovering over a button without using inheritance

<div class="a"> <img class="img_c" id="img_id" src="~~"> <div class="b"> <div class="c"> <ul class="d" id="e"> <li ~~~ > </ul> </div> </div> </div> Is there a way to display the ...

css

Having trouble with the rendering of the Stripe Element Quickstart example

Currently, I am diving into the world of Stripe's Element Quickstart. Take a look at this fiddle that I have been working on. It seems to be quite different from the example provided. Although I have included the file, I can't seem to figure out ...

javascripthtmlcssstripe-payments

The controller persists in its loop as it utilizes $state.go

As a newcomer to Angular, I am uncertain if this is the most effective solution. Within my state/route, there is a button that triggers the following function when clicked: _this.foo = function () { save(); $state.go("next"); } The issue arises w ...

javascriptangularjs

The webpage Page.php is failing to display the newly added content

I have a collection of logos on my homepage (index.php) in WordPress, and they are positioned at the bottom just as I intended. However, these logos do not appear on all pages. Even if I add the exact same code to the page.php file in the exact position, ...

phphtmlwordpress

tips for arranging the body of a card deck

I have a card-deck setup that looks like this https://i.sstatic.net/vuzlX.png I am trying to arrange these boxes in such a way that the total width of the box equals the sum of the Amazon Cost width and the BOXI+ width: https://i.sstatic.net/3uNbe.png He ...

htmlcsstwitter-bootstrapbootstrap-4

Is it possible to overlay color on top of a div background? (i.e. modify div color without altering the 'background-color' property)

Can you apply a color "on top of" a div's background? I'm looking to change the displayed color of a div without altering the 'background-color' value. I need to keep the background-color for comparison when divs are clicked: var pick ...

javascriptjquerycsshtmlbackground-color

Steps to update the toolbar color of Mui DataGrid

Check out this unique custom Toolbar I created specifically for Mui dataGrid function CustomToolbar() { return ( <GridToolbarContainer> <GridToolbarColumnsButton /> <GridToolbarFilterButton /> <GridToolbarDensit ...

javascriptmaterial-ui