Grow your CSS skills. Land your dream job.

Css animations

  • # October 17, 2012 at 11:17 am

    I have a css animation that works perfectly fine until the end. when the animation ends i want it to disappear or opacity: 0;. It does this for about half a second then it goes back to opacity: 1; [Here]( “http://foursquaresummiteast.org/development/callout.html”) is the link.

    # October 17, 2012 at 11:26 am

    You link does not work. Try putting it in Codepen.

    # October 17, 2012 at 11:40 am

    I think you’d like to read about the animation-fill-mode property.

    https://developer.mozilla.org/en-US/docs/CSS/animation-fill-mode

    # October 17, 2012 at 11:48 am

    link works just remove the denied and quotes

    # October 17, 2012 at 11:51 am

    Or just edit your link… :s

    # October 17, 2012 at 11:51 am

    Sorry…if someone puts a link in…I expect it to work ‘out of the box’.

    If they want me to do extra work….that’s a whole other ballgame. :)

    http://foursquaresummiteast.org/development/callout.html

    # October 17, 2012 at 11:59 am

    I just copy and pasted the link to where it said to. I don’t know what happened.

    # October 17, 2012 at 12:00 pm

    @HugoGiraudel I tried that but it didn’t effect anything.

    # October 17, 2012 at 12:03 pm

    Try putting the relevant html & css in Codepen.

    I suspect that you are trying to animate two properties and have mixed up the sequence somewhere.

    # October 17, 2012 at 3:53 pm

    .callout {
    position: relative;
    margin: 18px 0;
    padding: 0;
    background-color: red;
    border-radius: 5px;
    display: inline-block;
    -webkit-animation-duration: 6s;
    -webkit-animation-name: slidein;
    **opacity: 1;**

    callout opacity is reverting back to 1 above.

    # October 17, 2012 at 4:28 pm

    It worked! @amoss thanks!

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".