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 vote126 views1 answer
Truncate multiline text
CSS
6 votes121 views2 answers
Border-collapse
CSS
3 votes136 views2 answers
Css select all elements except last css
CSS
3 votes141 views4 answers
Css keep image ratio
CSS
0 vote123 views1 answer
Punderline none
CSS
2 votes144 views4 answers
Animation timing function css
CSS
0 vote130 views1 answer
Scss import class from another file
CSS
0 vote160 views1 answer
Css beutify scroller
CSS
4 votes163 views3 answers
Install Cors
CSS
1 vote111 views1 answer
Css fade in and stay
CSS