Lesson Code: http://www.developphp.com/video/CSS/keyframes-Animation-Tutorial-Floating-Elements
Learn some CSS3 keyframe animation logic to render an animated elliptic shadow under an animated floating element on your HTML5 web page.
source
Lesson Code: http://www.developphp.com/video/CSS/keyframes-Animation-Tutorial-Floating-Elements
Learn some CSS3 keyframe animation logic to render an animated elliptic shadow under an animated floating element on your HTML5 web page.
source
Muy bueno, Gracias!!!
can u make video about how to make comment box in html, and how to edit/delete comments on the web page
Hey @Adam Khoury What text edit type thing are you using to write these codes? I need one that actually changes colors, etc. to help me code. And also is it mac compatible?
thanks
Better developer of all!!! Ever…
WOW!!!!!!!!!!!!!
Very helpful, thanks!
tanks
man
Runs smooth like butter 😛 i see the tutorial is over a year and we stil need to use the prefix xD
Just awesome 🙂
Thank you so much! my first CSS3 animation :p yay!
Adam, your tutorials are by far the best I have seen. I can follow them easily. Thank you for bringing us these tut's, they are priceless!
sigh… dreamweaver.
also. people. start using jsfiddle or plunkr or codepen instead of dumping code fragments here.
I LOVE the Opera Browser, Adam, I don't know how you despise it. I despise IE. It's horrible. I hope IE dies.
Code part 5
@keyframes shadow_react { 50%{ margin:0px 20% 0px 20%; opacity:0.7;} 100%{ margin:0px 0px 0px 0px; opacity:0.1;}}
Code part 4
@-webkit-keyframes shadow_react { 50%{ margin:0px 20% 0px 20%; opacity:0.7;} 100%{ margin:0px 0px 0px 0px; opacity:0.1;}}
@-moz-keyframes shadow_react { 50%{ margin:0px 20% 0px 20%; opacity:0.7;} 100%{ margin:0px 0px 0px 0px; opacity:0.1;}}
@-ms-keyframes shadow_react { 50%{ margin:0px 20% 0px 20%; opacity:0.7;} 100%{ margin:0px 0px 0px 0px; opacity:0.1;}}
@-o-keyframes shadow_react { 50%{ margin:0px 20% 0px 20%; opacity:0.7;} 100%{ margin:0px 0px 0px 0px; opacity:0.1;}}
Code part-3
.bot_shadow{
position:relative;
height:16px;
background: #999;
opacity:0.1;
border-radius:100%;
margin:0px 0px 0px 0px;
top:100px;
-webkit-animation: shadow_react ease 2s infinite;
-moz-animation: shadow_react ease 2s infinite;
-ms-animation: shadow_react ease 2s infinite;
-o-animation: shadow_react ease 2s infinite;
animation: shadow_react ease 2s infinite;
}
code Part-2
@-webkit-keyframes bot_float { 50%{ top:100px;} 100%{ top:0px;} }
@-moz-keyframes bot_float { 50%{ top:100px;} 100%{ top:0px;} }
@-ms-keyframes bot_float { 50%{ top:100px;} 100%{ top:0px;} }
@-o-keyframes bot_float { 50%{ top:100px;} 100%{ top:0px;} }
@keyframes bot_float { 50%{ top:100px;} 100%{ top:0px;} }
This is my code :-
bot_container{
width:285px;
height:420px;
margin:0px auto;
/*border:#F00 1px dashed;*/
}
.bot{
position:relative;
background:url(dove.png);
height:200px;
width:200px;
top:0px;
-webkit-animation:bot_float ease 2s infinite;
-moz-animation:bot_float ease 2s infinite;
-ms-animation:bot_float ease 2s infinite;
-o-animation:bot_float ease 2s infinite;
animation:bot_float ease 2s infinite;
}
hii.. Adam i have little problem about that … it is working in Mozila-Firefox very well but it is not working in IE and it is showing some weird result on my browser . I have IE9 .please tell me where i am wrong.
You should do another google hangout that discusses what it takes to be a good web developer and the questions you may be asked during an interview or something 🙂 Just a thought
Nice!
Good job. Thank you.
infinite thx 😉
Thank you Thank you Thank you Thank you!!!!!! — infinite! 🙂
So cool thanks adam!! 🙂
That just opened so many doors. Thanks for this tutorial!
you should do some wordpress videos.
This is pretty slick. I'll be testing this out in the a.m.
thanks
Hey Adam in Firefox you don't need to use prefix, test it out and you'll see.
We're getting closer and closer to Flash without Flash… 🙂
Hi Adam, nice vid, please check your PM…
Thanks for your awesome tutorials Adam !