How to delay background animation - css

Question

I want that the background animation I have set will start in delay.
Here is the fiddle link: Fiddle link
Here is the css code:
.loginButton {
width: 92%;
background: #ffffff;
border: 1px solid #4dbcb8 !important;
margin-top: 30px;
height: 42px;
line-height: 40px;
position: absolute;
top: 132px;
color: #14192f !important;
border-radius: 3px !important;
font-size: 12pt !important;
letter-spacing: 0.05em;
font-weight: 600;
}
.loginButton:hover {
color: #fff !important;
font-weight: 400 !important;
transition: background .7s ease-out;
background: linear-gradient(to right, #fff 50%, #4dbcb8 50%);
background-position: right bottom;
background-size: 200% 100%;
}

Answer 1

Just add a second time parameter as the delay time:
transition: background .7s .5s ease-out;
This will cause a 500ms delay.

Answer 2

Add this line to your .loginButton CSS:
animation-delay: 2s;

Answer 3

div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
animation-delay: 2s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
#keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
Html
<div>
</div>
Please check this link:http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-delay