CSS3 keyframes Animation Tutorial Floating Element Shadows



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

33 thoughts on “CSS3 keyframes Animation Tutorial Floating Element Shadows”

  1. 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

  2. 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;}}

  3. 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;
    }

  4. 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;} }

  5. 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;
    }

  6. 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.

  7. 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

Leave a Reply

Your email address will not be published. Required fields are marked *