Custom Animation CSS Properties

Custom animations:

1.animation-name (Custom animation name)

The animation name applied by the element must be used with @keyframes, and the name is defined by @keyframes.

KeyFrames (animation keyframe): Begins with @keyframes, where {} writes a style rule for a different time period.

<style type= "Text/css" >     {     width: 100px;             height: 100px;             background: Blue;             animation-name: lefttoright;         }     @keyframes lefttoright  {/* defines the animation name lefttoright*/

from {margin-left:0px;}
to {margin-left:300px;}
}                
</style>

2.animation-duration (animation time)

 <style type= "Text/css" >.div  { width : 100px ; :  100px ;  background : blue ;  Animation-name : lefttoright ;  Animation-duration :  3s ; } @keyframes lefttoright  { from {MARGIN-LEFT:} to  {margin-left :  300px ;}   

3.animation-timing-function (animation transition speed type)

Linear: Linear transition

Ease: Smooth transitions

Ease-in: from slow to fast

Ease-out: from fast to slow

Ease-in-out: From slow to fast to slow

<style type= "Text/css" >.div{width:100px;Height:100px;background:Blue;Animation-name:LeftToRight;animation-timing-function:Ease-out;/*from fast to slow*/}@keyframes LeftToRight{From {margin-left:0} to{Margin-left:300px;}} </style>

4.animation-delay: (Animation delay time)

<style type= "Text/css" >.div{width:100px;Height:100px;background:Blue;Animation-name:LeftToRight;animation-timing-function:Ease-out;Animation-delay:2s; }@keyframes LeftToRight{From {margin-left:0} to{Margin-left:300px;}}</style>

5.animation-iteration-count (animation execution times)

<style type= "Text/css" >. Div{width:100px;Height:100px;background:Blue;Animation-name:LeftToRight;animation-timing-function:Ease-out;Animation-delay:2s;Animation-iteration-count:Infinite; /* Countless times */}@keyframes LeftToRight{From {margin-left:0} to{Margin-left:300px;}} </style>

6.animation-direction (animation order)

Normal: Regular direction

Reverse: Opposite direction movement

Alternate: The normal movement and then the opposite direction of movement, and continuous alternating movement

Aiternate-reverse: First, the opposite direction of movement, and continuous alternating motion

<style type= "Text/css" >.div{width:100px;Height:100px;background:Blue;Animation-name:LeftToRight;animation-timing-function:Ease-out;Animation-delay:2s;Animation-iteration-count:Infinite;animation-direction:Alternate; /* The animation runs normally and then runs in the opposite direction, and continues to run alternately */}@keyframes LeftToRight{From {margin-left:0} to{Margin-left:300px;}} </style>

7. Animation-play-state (animated State)

<style type= "Text/css" >.div{width:100px;Height:100px;background:Blue;Animation-name:LeftToRight;animation-duration:3s;animation-timing-function:ease-in;Animation-delay:2s;Animation-iteration-count:Infinite;animation-direction:Alternate;Animation-fill-mode:forwards; }. Div:hover{animation-play-state:paused; }/* When the mouse moves to the Div, the animation pauses */@keyframes LeftToRight{From {margin-left:0} to{Margin-left:300px;}}</style>

8.animation-fill-mode (state outside of animation time)

None: Default value, do not set state outside of object animation

Forwards: Sets the state of the object at the end of the animation

Backwards: Sets the state of the object at the start of the animation

Both: Sets the state at which an object starts or ends as an animation

<style type= "Text/css" >.div{width:100px;Height:100px;background:Blue;Animation-name:LeftToRight;animation-timing-function:Ease-out;Animation-delay:2s;Animation-iteration-count:Infinite;animation-direction:Alternate;Animation-fill-mode:forwards; }@keyframes LeftToRight{From {margin-left:0} to{Margin-left:300px;}} </style>

9.animation (animated composite properties)

Syntax: animation:[Animation-name] | | [Animation-duration] | | [Animation-timing-function] | | [Animation-delay] | | [Animation-iteration-count] | | [Animation-direction] | | <single-animation-fill-mode> | | <single-animation-play-state> 

<style type= "Text/css" >.div {            width: 100px;     height: 100px;     background: Blue;         animation:lefttoright 3s ease-out forwards;}         {from {margin-left: 0} {margin-left:      300px;} }</style>    

Custom Animation CSS Properties