https://github.com/sydinh/css-animation
CSS Animation :boom:
https://github.com/sydinh/css-animation
css css-animation my-repo
Last synced: over 1 year ago
JSON representation
CSS Animation :boom:
- Host: GitHub
- URL: https://github.com/sydinh/css-animation
- Owner: sydinh
- Created: 2017-11-26T10:31:26.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-27T16:13:22.000Z (over 8 years ago)
- Last Synced: 2025-01-24T12:14:04.568Z (over 1 year ago)
- Topics: css, css-animation, my-repo
- Language: CSS
- Homepage:
- Size: 3.91 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS Animation
## Animation Shorthand
```css
animation: name duration timing-function delay iteration-count direction fill-mode;
```
## Basic Declaration & Usage
### CSS
```css
@-webkit-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
```
### CSS
```css
#box {
-webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}
```
## References
* [https://www.w3schools.com/css/css3_animations.asp](https://www.w3schools.com/css/css3_animations.asp)
* [https://css-tricks.com/snippets/css/keyframe-animation-syntax/](https://css-tricks.com/snippets/css/keyframe-animation-syntax/)
## Author
* [A front-end developer with no special talents, only passionately curious.](https://sydinh.github.io/)