CODEWITHSUNDEEP
cssanimation
alonblack
alonblack

Reputation: 955

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%;

}

Upvotes: 1

Views: 543

Answers (3)

hmak
hmak

Reputation: 3978

Just add a second time parameter as the delay time:

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

This will cause a 500ms delay.

Upvotes: 3

Razia sultana
Razia sultana

Reputation: 2221

 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

Upvotes: 0

Blazeag
Blazeag

Reputation: 480

Add this line to your .loginButton CSS:

animation-delay: 2s;

Upvotes: 1

Related Questions