css-animations

问题 I\'m creating a marquee effect with CSS3 animation. #caption { position: fixed; bottom: 0; left: 0; font-size: 20px; line-height: 30px; height:30px; width: 100%; white-space: nowrap; -moz-animation: caption 50s linear 0s infinite; -webkit-animation: caption 50s linear 0s infinite; } @-moz-keyframes caption { 0% { margin-left:120%; } 100% { margin-left:-4200px; } } @-webkit-keyframes caption { 0% { margin-left:120%; } 100% { margin-left:-4200px; } } <div id=\"caption\"> The quick brown fox

问题 I\'m running an animation on some elements that are set to opacity: 0; in the CSS. The animation class is applied onClick, and, using keyframes, it changes the opacity from 0 to 1 (among other things). Unfortunately, when the animation is over, the elements go back to opacity: 0 (in both Firefox and Chrome). My natural thinking would be that animated elements maintain the final state, overriding their original properties. Is this not true? And if not, how can I get the element to do so? The

问题 I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen. However, it always goes back to its original state once it has played. Anyone know how I can stop it on its last css frame (100%) , or else how to get rid of the whole div it is in once it has played. @keyframes colorchange { 0% { transform: scale(1.0) rotate(0deg); } 50% { transform: rotate(340deg) translate(-300px,0px) } 100% { transform: scale(0.5) rotate(5deg) translate