- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
Shorthand property to set all the animation properties with CSS
The shorthand property to set all the animation properties is animation. It sets the animation duration, animation name, etc.
You can try to run the following code to work with animation shorthand property:
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
background-color: yellow;
animation: myanim 2s
}
@keyframes myanim {
from {
background-color: green;
}
to {
background-color: blue;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- Related Articles
- CSS Animation Shorthand property
- Shorthand property to set the font with CSS
- Shorthand property to set columns with CSS
- Shorthand property to set the background in CSS
- Shorthand property for setting all the column-rule-* properties
- Transition shorthand with multiple properties in CSS?
- Set all border-radius properties with CSS
- CSS shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
- CSS top property with Animation
- The Background Shorthand Property in CSS
- The padding shorthand Property in CSS
- The margin Shorthand Property in CSS
- The border Shorthand Property in CSS
- The outline Shorthand Property in CSS
- Set all the background image properties in one section with CSS
Advertisements