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 is the link.
You link does not work. Try putting it in Codepen.
I think you'd like to read about the animation-fill-mode property.
https://developer.mozilla.org/en-US/docs/CSS/animation-fill-mode
link works just remove the denied and quotes
Or just edit your link... :s
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
I just copy and pasted the link to where it said to. I don't know what happened.
@HugoGiraudel I tried that but it didn't effect anything.
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.
@Paulie_D http://codepen.io/MattSanford/full/CBFfp
.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.
It worked! @amoss thanks!
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 is the link.
You link does not work. Try putting it in Codepen.
I think you'd like to read about the animation-fill-mode property.
https://developer.mozilla.org/en-US/docs/CSS/animation-fill-mode
link works just remove the denied and quotes
Or just edit your link... :s
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
I just copy and pasted the link to where it said to. I don't know what happened.
@HugoGiraudel I tried that but it didn't effect anything.
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.
@Paulie_D http://codepen.io/MattSanford/full/CBFfp
.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.
It worked! @amoss thanks!