alonblack alonblack - 1 year ago 110
CSS Question

How to delay background animation

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 Source

Just Add A Second Time Parameter As Delay Time:

transition: background .7s .5s ease-out;

This Will Cause A 500ms Delay

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download