@keyframes moveInLeft
@keyframes moveInLeft{
0%{
opacity: 0;
transform: translateX(-100px);
-webkit-transform: translateX(-100px);
-moz-transform: translateX(-100px);
-ms-transform: translateX(-100px);
-o-transform: translateX(-100px);
}
80%{
transform: translateX(20px);
}
100%{
opacity: 1;
transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}
}
/* Where animation goes to work */
.heading-primary-main{
display: block;
font-size: 60px;
font-weight: 400;
letter-spacing: 35px;
animation-name: moveInLeft;
animation-duration: 5s;
}
Examples MDN web Docs
* 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;
