Run your animations easily with the CSS animation shorthand:
animation: crazy 4s ease-in-out 0.5s 12 backwards;
- crazy: Animation name
- 4s: Duration
- ease-in-out: Timing function
- 0.5s: Delay
- 12: Iteration count
- backwards: Fill mode
Timing-function
animation-timing-function can take one of the following values: linear, ease, ease-in, ease-out, ease-in-out or cubic-bezier(…).
Fill-mode
animation-fill-mode can take one of the following values: none, forwards, backwarts or both.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
About the author
Alligator.io is a developer-focused resource that offers tutorials and insights on a wide range of modern front-end technologies, including Angular 2+, Vue.js, React, TypeScript, Ionic, and JavaScript.
Still looking for an answer?
This work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and AI-native businesses
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Start building today
From GPU-powered inference and Kubernetes to managed databases and storage, get everything you need to build, scale, and deploy intelligent applications.
