The art of spinning in CSS

Can anyone help me figure out how to make an animation in CSS stay at its last frame instead of reverting back to the beginning?

The <i>animation-fill-mode: forwards;</i> property doesn't seem to be doing the trick. Is there a workaround that prevents the animation from resetting?

Here's a jsFiddle link showcasing the issue with the animation

.rotate{

  animation: animationFrames ease 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames ease 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards/*Chrome 16+, Safari 4+*/ 
}

@keyframes animationFrames{
  0% {
    transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    -moz-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    -moz-transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    -webkit-transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}

@-o-keyframes animationFrames {
  0% {
    -o-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    -o-transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    -ms-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    -ms-transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}
<body>
  <div> <span class="rotate">G</span>
  </div>
</body>

cssanimationrotationcss-animations

Answer №1

It seems like there were some issues with the syntax, specifically pertaining to the animation shorthand property. Here is the correct syntax:

name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state

.rotate {
  animation: animationFrames 4s ease 0s 1 normal forwards running;
  transform-origin: 50% 50%;
  position: absolute;
}
@keyframes animationFrames {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  100% {
    transform: translate(0px, -10px) rotate(-45deg);
  }
}
<body>
  <div> <span class="rotate">G</span>
  </div>
</body>

Please note that this code will function properly in modern versions of Firefox and Chrome without requiring any browser prefixes.

Answer №2

Technique 1:

To reverse the animation, simply utilize the animation-direction: alternate; property.

Check it out on this Fiddle: http://jsfiddle.net/jgvkjzqb/5/

.rotate{

  animation: animationFrames ease 4s;
  animation-iteration-count: 2;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames ease 4s;
  -webkit-animation-iteration-count: 2;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards/*Chrome 16+, Safari 4+*/ 
   -webkit-animation-direction: alternate;
   animation-direction: alternate;

}

@keyframes animationFrames{
  0% {
transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}

@-moz-keyframes animationFrames{
  0% {
-moz-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
-moz-transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
-webkit-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
-webkit-transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}

@-o-keyframes animationFrames {
  0% {
-o-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
-o-transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}

@-ms-keyframes animationFrames {
  0% {
-ms-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
-ms-transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}
<body>
  <div> <span class="rotate">G</span>
  </div>
</body>

Approach 2:

Another way to achieve the transition is by applying the rotate(-45deg) at 50% and rotate(0deg) at 100%.

Fiddle for this method: http://jsfiddle.net/jgvkjzqb/2/

  .rotate {
animation: animationFrames ease 8s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards;
/*when the spec is finished*/
-webkit-animation: animationFrames ease 8s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards
/*Chrome 16+, Safari 4+*/
}
@keyframes animationFrames {
0% {
    transform: translate(0px, 0px) rotate(0deg);
}
50% {
    transform: translate(0px, -10px) rotate(-45deg);
}
100% {
    transform: translate(0px, 0px) rotate(0deg);
}
}
@-moz-keyframes animationFrames {
0% {
    -moz-transform: translate(0px, 0px) rotate(0deg);
}
50% {
    -moz-transform: translate(0px, -10px) rotate(-45deg);
}
100% {
    -moz-transform: translate(0px, 0px) rotate(0deg);
}
}
@-webkit-keyframes animationFrames {
0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
}
50% {
    -webkit-transform: translate(0px, -10px) rotate(-45deg);
}
100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
}
}
@-o-keyframes animationFrames {
0% {
    -o-transform: translate(0px, 0px) rotate(0deg);
}
50% {
    -o-transform: translate(0px, -10px) rotate(-45deg);
}
100% {
    -o-transform: translate(0px, 0px) rotate(0deg);
}
}
@-ms-keyframes animationFrames {
0% {
    -ms-transform: translate(0px, 0px) rotate(0deg);
}
50% {
    -ms-transform: translate(0px, -10px) rotate(-45deg);
}
100% {
    -ms-transform: translate(0px, 0px) rotate(0deg);
}
}
<body>
  <div> <span class="rotate">G</span>
  </div>
</body>

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

Flexbox Alignment Problem with Mixed Text and Image Elements

Struggling to achieve a layout like the one in this image using Flexbox. Take a look: https://i.sstatic.net/EGsAN.png After some difficulty with floats, I've decided to experiment with flexbox. My CSS is set up to display the image correctly. The ...

htmlcss

The functionality of z-index is not applying when using position fixed

I have the following CSS code: #one{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; } #two{ position: relative; z-index: 9; width: 200px; height: 200px; background: red; } #link { position: ...

css

Steps for positioning a play button at the center of all images

index.html - here is the index.html file code containing all the necessary html code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width ...

htmlcssflexboxcss-selectors

Creating a standalone Wordpress child theme with its own CSS

After creating a child theme based on the responsive i-transform theme from http://templatesnext.org/itrans/, I found myself continuously undoing the i-transform CSS, which is taking up a lot of my time. However, if I remove the entire parent stylesheet, t ...

htmlcsswordpress

Can you remind me of the specific CSS class used for Internet Explorer in Twitter Bootstrap?

Currently utilizing Twitter Bootstrap and curious if there is a specific CSS class to designate IE browsers within the BODY or HTML tags. Interested in writing CSS specifically for all IE browsers. Aware that Bootstrap offers some CSS classes for IE brows ...

htmlcssinternet-explorertwitter-bootstrap

Saving users' dark mode preference on my website

I recently implemented a dark mode feature on my website. However, I noticed that when I enable dark mode and then refresh the page or navigate away, the preference resets. To address this issue, I am looking to store the user's preference as a cookie ...

jqueryhtmlcss

Using Tailwind CSS to center a NexJS <Image /> component within a modal

In an effort to style my MapBoxGL popup content, I am working on aligning the text above the image to the left and centering the image below within the popup. As shown in the image below, this is currently proving to be a challenge as I transition from usi ...

cssreactjsnext.jstailwind-cssnext-images

What are the Functions of Ctrl-K on Stack Overflow?

I'm intrigued by how to incorporate the Ctrl+K (code sample) feature for code. For example: public static void main(String args[]){ System.out.println.out("welcome"); } Is there a way to nicely format this? Do we need any specific package to ...

javascriptcsscode-formatting

Working towards ensuring my website is responsive

Hello, I am a CSS beginner currently working as an intern. My task is to make a website's CSS compatible with Internet Explorer, and then make it responsive and scalable. Essentially, the design should retain its appearance when the window size change ...

javascripthtmlcss

What is the best method for starting a string using the symbol '~'?

Hello everyone! I have a task that requires me to add a special feature. The user needs to enter something in a field, and if it starts with the tilde (~), all subsequent entries should be enclosed in a frame within the same field or displayed in a list ...

javascripthtmlcssstroke

How to move content without affecting the background of the `<body>` using scrolling

Can I achieve a glass morphism effect on my page without moving the background of the body? I only want to move the .container. Is this feasible? I attempted using background-attachment: fixed, but it did not work for me. Here is the code snippet I have be ...

htmlcss

Learn how to style inline HTML elements, such as headings, labels, input fields, and buttons, which are typically displayed as block elements

Title. For my dictionary chrome extension, I am looking to inline a label, input field, and button all in one line. This is what I want to achieve: Define:[ INPUT ] DEFINE The brackets represent the input field and "DEFINE" is the ...

htmlcsslayoutinputgoogle-chrome-extension

What is the best way to modify the colors of two specific elements using a combination of CSS and JavaScript

I am currently developing a browser-based game and have encountered an issue. Here is the relevant line of my HTML/PHP code: echo '<div id="div'.$n.'" class="d'.$rand.'" onclick="swapit(this.id, this.className)"></di ...

javascripthtmlcssbackground-color

Eliminate the standard cell padding in nested HTML tables

In my setup, there is a parent table where each td tag in the tr tag contains a child table. Specifically, as shown in the example with Data WS-C3.... in the picture. [![<table class="table table--bordered table--nostripes table-top"> <thead& ...

htmlcssangular

The Bootstrap row does not display divs in a stacked formation when viewed on smaller screens

My layout is using bootstrap rows for two divs. I want them to be side by side on large devices, but stacked on small devices. However, Bootstrap is not stacking them on small devices and they are still both sitting at 50%. The specific divs I am talking ...

htmlcsstwitter-bootstrap

Is it possible to align images vertically with text in a multi-column Bootstrap 4 container?

Inquiring on how to achieve vertical center alignment of text and images for a website section similar to the one shown in this image: https://i.sstatic.net/s8gNh.jpg. The intention is to align the logos and the corresponding text of company names situated ...

htmlcsstwitter-bootstrapbootstrap-4

Eliminate any vacant areas within a container and shift the container, along with its contents, on the webpage

I want to eliminate the empty space within the container while maintaining some spacing around the black box, and ensure responsiveness. Additionally, how can I shift the container with its content downwards and to the right of the webpage, while still ke ...

cssflexboxbootstrap-5

Tips for positioning a navigation bar in the center for various screen resolutions

After hours of searching, I still can't find a solution to my problem. I'm new to this, and on my main monitor, everything looks centered just fine. 1920x1080: View larger image But on my 1280x1024 monitor: View smaller image As you can see, i ...

htmlcsscenternavbar

Find the height of the viewport using jQuery, subtracting (n) pixels

Apologies if the topic seems puzzling, I couldn't find a better way to explain it. I utilized jQuery to adjust the height of a div to match the size of the viewport. var slidevh = function() { var bheight = $(window).height(); $(".container" ...

javascriptjqueryhtmlcss

Configuring a Custom Color for the Bootstrap Datetimepicker

Problem I encountered an issue with my projects that are both using the bootstrap-datetimepicker. While one project displays the correct color, as seen here, the other project shows a wrong color, shown here. Below is the HTML code snippet I am working wi ...

htmlcssdatetimepicker