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 vote281 views1 answer
Css no purple links
CSS
3 votes289 views1 answer
Inline block align center
CSS
2 votes314 views1 answer
Css center in td
CSS
6 votes272 views3 answers
Linear-gradient(top to bottom)
CSS
-1 vote301 views4 answers
Css after
CSS
1 vote281 views1 answer
How to make font awesome responsive bootstrap
CSS
6 votes303 views5 answers
Remove line from a href css
CSS
0 vote270 views1 answer
Container transparent text opaque
CSS
63 votes323 views6 answers
Html center image
CSS
9 votes295 views3 answers
Grid repeat css
CSS