Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to achieve a rotating animation in css3". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Implementation method: 1, use "@ keyframes animation name {50% {transform: rotate (rotation angle);}" statement to create rotation animation; 2, use "element {animation: animation name time infinite;}" statement to apply rotation animation to the specified element.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Css3 implements a rotating animation

1. If you want to use css3 for animation, you need to use the animation attribute and the "@ keyframes" rule.

Keyframes is a rule of CSS3 that can be used to define the behavior of a cycle of CSS animation and to create simple animations.

Animations are similar to transformations in that they both change the representation value of the CSS property over time. The main difference is that when the property value changes (for example, when the property value changes when hovering), the transformation is implicitly triggered, but the animation is explicitly performed when the animation attribute is applied. Therefore, the animation needs to display the explicit values of the animation properties. These values are defined by the animation keyframes specified in the @ keyframes rule. Therefore, the @ keyframes rule consists of a set of encapsulated CSS-style rules that describe how attribute values change over time.

Then, using different CSS animation attributes, you can control many different aspects of the animation, including the number of iterations in the animation, whether it alternates between the start and end values, and whether the animation should be run or paused. Animation can also delay its start time.

Syntax:

/ * define animation * / @ keyframes animation name {/ * style rules * /} / * apply it to the element * / .element {animation-name: animation name (declared in @ keyframes); / * or use the animation shorthand attribute * / animation: animation name 1s.}

2. Use transform: rotate (rotation angle) to control the rotation action in the "@ keyframes" rule.

Implementation code:

Div {width: 100px; height: 100px; background: pink; margin: 100px; animation: mymove 5s infinite;-webkit-animation: mymove 5s infinite / * Safari and Chrome * /} @ keyframes mymove {50% {transform: rotate (360deg) } @-webkit-keyframes mymove {/ * Safari and Chrome * / 50% {transform: rotate (360deg) }}

This is the end of the content of "how to achieve a rotating animation in css3". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.