![]() ![]() The animation plays forward (0% to 100%). To the end state (100%) and plays backwards (to 0%).Īlternate - The animation reverses direction every cycle. Resets to the beginning state (0%) and plays forward again (to 100%). Normal (default) - The animation plays forward. The animation-direction: property specifies whether the animation should playįorward, reverse, or in alternate cycles. animation-name: The name of the animation, defined in the animation-duration: The duration of the animation, in seconds (e.g., 5s)Ĭontinuing with the above bounceIn example, we’ll add animation-name andĪnimation-duration to the div that we want to animate.Īnimation : animation : bounceIn 2 s ease-in-out 3 s 2.Properties for the animation to take effect: The animation properties are added to the CSS selectors (or elements) that you They assign the to the elements that you want to animate.Once the are defined, the animation properties must be added in order (If you’re unfamiliar with CSS Transforms, you’ll want to brush up on yourĬombining CSS transforms in the animations is really where the magic happens.) At the final stage (100%), it scalesĭown slightly and returns to its default size. Grows to 120 percent of its default size. At the second stage (60%) the element fades in to full opacity and ![]() Opacity 0 and scaled down to 10 percent of its default size, using CSS transform At the first stage (0%), the element is at Let’s take a look at a simple I’ve named “bounceIn”. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |