- This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
Viewing 12 posts - 1 through 12 (of 12 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
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. :)
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.
.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!