- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Animation Effects in CSS
The animation is the process of creating motion effects and changes the appearance.CSS does support different animation effects to change the event motion.
Under Animation, a concept Keyframes is used. Keyframes will control the intermediate animation steps in CSS3.
The below example shows height, width, color, name, and duration of animation with keyframes syntax −
Syntax
@keyframes animation { from {background-color: pink;} to {background-color: green;} } div { width: 100px; height: 100px; background-color: red; animation-name: animation; animation-duration: 5s; }
- Related Articles
- CSS animation-delay property
- CSS animation-duration property
- CSS Animation Shorthand property
- CSS animation-name property
- CSS animation-direction property
- Fade In Animation Effect with CSS
- Bounce In Animation Effect with CSS
- Roll In Animation Effect with CSS
- Rotate In Animation Effect with CSS
- Fade In Tooltip with CSS Animation
- Perform Animation on CSS opacity
- CSS top property with Animation
- Wiggle Animation Effect with CSS
- Bounce Animation Effect with CSS
- Flash Animation Effect with CSS

Advertisements