div{
animation: name duration timing-function delay iteration-count
direction fill-mode;
}
/*
name: name of the animation
duration: amount of time it takes ex: 2s
timing-function: ex: linear, ease, etc.
delay: amount of time to delay from it starting
iteration-count: how many times to play the animation, ex: initial
direction: ex: forwards, backwards, alternate, alternate-reverse
fill-mode: ex: none, forwards, backwards, both
*/
Posted by: Guest
on February-04-2021
8
css animation
<style>#ball {
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,#ffcccc
);
/*"Call" the animation "function" */
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-delay: 2s;
/* Normal, reverse, alternate(between the fwd and back)
and alternate-reverse */
animation-direction: reverse;
/* Ease is deafault, use cubic-bezier(n,n,n,n) for custom */
animation-timing-function: linear;
/* if you want something to display from hidden
set the opacity to 0 and in the keyframe steps bring
the opacity to 1 gradually to stop it flashing */
}
/* The animation "bounce" */
@keyframes bounce{
/* start */0% {
top: 0px;
}
/* step (you can add multiple incremental steps from 1-100) */50% {
top: 249px;
width: 130px;
height: 90px;
}
/* end (you can count down from 100 to 0 too) */100% {
top: 0px;
}
}
</style><div id="ball"></div>
<!DOCTYPE html><html><head><style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style></head><body><p><b>Note:</b>This example does not work in Internet Explorer 9and earlier versions.</p><div><p>you can add text in this box or anithing else like a pictrue</p></div></body>
div{
animation: name duration timing-function delay iteration-count
direction fill-mode;
}
/*
name: name of the animation
duration: amount of time it takes ex: 2s
timing-function: ex: linear, ease, etc.
delay: amount of time to delay from it starting
iteration-count: how many times to play the animation, ex: initial
direction: ex: forwards, backwards, alternate, alternate-reverse
fill-mode: ex: none, forwards, backwards, both
*/
Posted by: Guest
on February-04-2021
8
css animation
<style>#ball {
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,#ffcccc
);
/*"Call" the animation "function" */
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-delay: 2s;
/* Normal, reverse, alternate(between the fwd and back)
and alternate-reverse */
animation-direction: reverse;
/* Ease is deafault, use cubic-bezier(n,n,n,n) for custom */
animation-timing-function: linear;
/* if you want something to display from hidden
set the opacity to 0 and in the keyframe steps bring
the opacity to 1 gradually to stop it flashing */
}
/* The animation "bounce" */
@keyframes bounce{
/* start */0% {
top: 0px;
}
/* step (you can add multiple incremental steps from 1-100) */50% {
top: 249px;
width: 130px;
height: 90px;
}
/* end (you can count down from 100 to 0 too) */100% {
top: 0px;
}
}
</style><div id="ball"></div>
<!DOCTYPE html><html><head><style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style></head><body><p><b>Note:</b>This example does not work in Internet Explorer 9and earlier versions.</p><div><p>you can add text in this box or anithing else like a pictrue</p></div></body>
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems
resetting your password contact us
Check Your Email and Click on the link sent to your email