Css animation, css

Css animation, css

Css3 Animation

 

@ Keyframes

Specifies the animation. The name of the animation, the percentage of animation duration, and one or more css style attributes must be defined.

Specify the time when a change occurs by percentage, or use the keywords "from" and "to", which is equivalent to 0% and 100%.

Syntax: @ keyframes animationname {keyframes-selector {css-styles ;}}

 

Animation

Is a short attribute used to set six animation attributes:

Animation-name

Required @ keyframes animation name

Animation-duration

Specifies the seconds or milliseconds that an animation takes to complete a cycle. The default value is 0.

Animation-timing-function

Specifies the animation speed curve, which is used to make the changes smoother.

The speed of a linear animation is the same from start to end.

Default. The animation starts at low speed, accelerates, and slows down before it ends.

Animated-in animation starts at low speed

The seek-out animation ends at low speed.

The Animated-in-out animation starts and ends at low speed.

Values of cubic-bezr (n, n) in the cubic-bezr function. The possible value is a value ranging from 0 to 1.

Animation-delay

Specifies when the animation starts. The default value is 0.

Animation-iteration-count

Specifies the number of times an animation is played. The default value is 1.

Infinite requires that the animation should be played infinitely.

Animation-direction

Specifies whether the animation is played reversely in the next cycle.

Normal default value. The animation should be played normally.

The alternate animation should be played in turn in reverse playback.

Animation-play-state

Specifies whether the animation is running or paused. The default value is "running"

Paused specifies that the animation has been paused

Running specifies that the animation is playing

Animation-fill-mode

Specifies whether the animation effect is visible before or after playback.

None does not change the default behavior

Forwards when the animation is complete, keep the last attribute value (defined in the last key frame)

Backwards applies the start attribute value (defined in the first key frame) before the animation is displayed within the period specified by animation-delay)

Both the forward and backward fill modes of both are applied.

<div> </div><style>    div{        width: 100px;         height: 100px;         background: red;         animation: demo 5s ease infinite;        position: relative;    }    @keyframes demo{        0%   {background:red; left:0px; top:0px;}        25%  {background:yellow; left:200px; top:0px; border-radius: 50%;}        50%  {background:blue; left:200px; top:200px; border-radius: 0%;}        75%  {background:green; left:0px; top:200px; border-radius: 50%;}        100% {background:red; left:0px; top:0px;}    }</style>

<Div> <p> currently, mainstream browsers chrome, safari, firefox, and opera support most of CSS3 functions, IE10 and later began to fully support CSS3 </p> </div> <style> div {margin: 0 auto; width: 500px; height: 35px; overflow: hidden; position: relative;} p {width: 100000px; position: absolute; animation: divv 10 s linear infinite;} @ keyframes divv {from {left: 500px;} to {left: -800px ;}</style>