xxxxxxxxxx
#item1 {
width: 40px;
height: 40px;
background-color: #FFA310;
animation: move 5s;
/*speeds up first, then slows down*/
animation-timing-function: ease;
}
#item2 {
width: 40px;
height: 40px;
background-color: #10FF14;
animation: move 5s;
/*constant speed*/
animation-timing-function: linear;
}
#item3 {
width: 40px;
height: 40px;
background-color: #1064FF;
animation: move 5s;
/*starts slow, then speeds up*/
animation-timing-function: ease-in;
}
#item4 {
width: 40px;
height: 40px;
background-color: #C73447;
animation: move 5s;
/*starts fast, then slows down*/
animation-timing-function: ease-out;
}
@keyframes move {
0% { left: 0;}
100% { left: 250px;}
}
div {
margin-top: 30px;
position: relative;
}
xxxxxxxxxx
/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
/* Steps Function keywords */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);
/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;
xxxxxxxxxx
/*increase speed toward middle then slow to end */
animation-timing-function: ease;
/*start slow increase speed till end*/
/*You should use this ease when an object is outgoing.*/
animation-timing-function: ease-in;
/*start quick decrease speed till end*/
/*You should use this ease when an object is incoming.*/
animation-timing-function: ease-out;
/*start slow, speeding up, decrease speed till end*/
animation-timing-function: ease-in-out;
/*animates at an even speed.*/
animation-timing-function: linear;
xxxxxxxxxx
/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
/* Steps Function keywords */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);
/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: revert;
animation-timing-function: revert-layer;
animation-timing-function: unset;
xxxxxxxxxx
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
xxxxxxxxxx
body {
margin: 50px;
background-color: #0C1527;
display: flex;
}
.circle-yellow {
width: 40px;
height: 40px;
background-color: #FFA310;
border-radius: 50%;
animation-name: pulse;
animation-duration: 3s;
}
.circle-green {
width: 100px;
height: 100px;
top: 120px;
left: 30px;
background-color: #10FF14;
border-radius: 50%;
position: absolute;
animation-name: pulse;
animation-duration: 3s;
}
.circle-blue {
left: 170px;
top: 15px;
width: 60px;
height: 60px;
background-color: #1064FF;
border-radius: 50%;
position: absolute;
animation-name: pulse;
animation-duration: 3s;
}
.visual {
position: relative;
width: 50px;
height: 50px;
display: inline;
}
@keyframes pulse {
0% { transform: scale(1);}
50% { transform: scale(2);}
100% { transform: scale(1);}
}