Animation css

Animation shorthand css

animation: name time func delay iteration dir fill play;
animation: none 0s ease 0s 1 normal none running;

Css animation shorthand

animation-name: none;
animation-duration: 0s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;

Animation css

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
/* 
name: name of the animation
duration: amount of time it takes to complete ex: 2s
timing-function: Specifies the speed curve of the animation ex: linear, ease, etc.
delay:Specifies a delay before the animation will start  
iteration-count: how many times to play the animation, ex: initial
direction: Specifies whether or not the animation should play in reverse on alternate cycles ex:forwards, backwards, alternate, alternate-reverse
fill-mode: Specifies what values are applied by the animation outside the time it is executing ex: none, forwards, backwards, both
animation-play-state: Specifies whether the animation is running or paused
*/

Css animation

.shrink { 
transition: all .2s ease-in-out; 
}

.shrink:hover { 
transform: scale(0.9); 
}

Source: codegrepper.com

Css pause animation

/* On a une seule animation */
animation-play-state: running;
animation-play-state: paused;

/* On gère plusieurs animations */
/* avec des valeurs respectives */
animation-play-state: paused, running, running;

/* Valeurs globales */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: unset;

Animation css

<style>
div{
height:50px;
width:50px;
background: #3ba59b;
border-radius: 50%
}
</style>

Similar codes

0 vote326 views1 answer
Css display table row gap
CSS
1 vote291 views1 answer
Convert string to uppercase while typing
CSS
1 vote326 views2 answers
Button transparent using css
CSS
1 vote301 views1 answer
How to open link in same tab in chrome
CSS
0 vote296 views1 answer
Css button no style
CSS
31 votes289 views6 answers
Overflow
CSS
0 vote306 views1 answer
How to override bootstrap css in wordpress
CSS
3 votes310 views2 answers
How to decurate react router link css
CSS
0 vote303 views1 answer
Circular div css
CSS
0 vote304 views4 answers
Width in css
CSS