After the text color changes to purple, you’ll see it flip back to black. This property instructs the animated element to retain the styles from the first and/or last keyframe of the animation. The good news is that CSS animations have a solution, the animation-fill-mode property. However, by default, CSS animations will change back to the element’s pre-animated state after an animation finishes. If this animation only plays once, you’d probably want the color to stay purple after the animation completes. Say you have an animation that starts in one state - like black text - and ends in another state - like purple-colored text. See the Pen css animation issues: animation plays once by Christina Perricone ( on CodePen. Try uncommenting the animation-iteration-count rule below. This value can be a specific number of cycles or infinite if you want the animation to loop forever.
Similarly, a CSS animation will only cycle one time unless you specify a number of iterations with the animation-iteration-count parameter. See the Pen css animation issues: no animation duration by Christina Perricone ( on CodePen. To override this, add an animation-duration rule to your targeted element with a seconds value, in the same block as animation-name.īelow, try removing the comments around animation-duration to fix the animation. By default, a CSS animation cycle is zero seconds long. See the Pen css animation issues: no keyframes by Christina Perricone ( on CodePen.Įven if you’ve assigned a keyframes rule to an element, it still may not appear to play if you haven’t set an animation-duration. In the example below, try uncommenting the rule to activate the animation. Check that your rule exists and that its name matches that of animation-name for the targeted element. Without this rule, your element won’t have any animation to use. In CSS animations, the rule defines how the animation looks, or, more specifically, which element styles change and when. Whether your animation isn’t working as intended, or just isn’t working at all, here are some reasons why and how you can resolve them: No Rule To help you out, we’ve compiled some common issues that beginner developers (and sometimes experienced ones!) face when creating CSS animations, and we’ll show you how you can fix them. Plus, there’s a chance that animations may not work on certain browsers, or that your animation can negatively affect page performance. For instance, CSS animations require you to write syntax in a specific way, and to include certain rules to get things to look right.
0 kommentar(er)
