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 vote356 views1 answer
Display elements in column css
CSS
0 vote372 views1 answer
Using tinymce with tailwind css
CSS
2 votes338 views1 answer
Circle div
CSS
3 votes379 views1 answer
Download css from website
CSS
1 vote321 views1 answer
Add black above image css
CSS
0 vote334 views1 answer
Css svg width 100%
CSS
6 votes300 views1 answer
Float css examples
CSS
66 votes338 views6 answers
Rotate element css
CSS
0 vote336 views2 answers
Svg as background css
CSS
0 vote433 views2 answers
Materialize css for react
CSS Materialize