The animation property is used to call and control an @keyframe animation. Like this: .element-to-animate { animation: NAME-YOUR-ANIMATION 5s infinite; } Which refers to a keyframe like this: @keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } You’ll need vendor prefixes to get good browser support: @-webkit-keyframes NAME-YOUR-ANIMATION { 0% { opacity:
Properties
The align-self property is a sub-property of the Flexible Box Layout module. It makes possible to override the align-items value for specific flex items. The align-self property accepts the same 5 values as the align-items: flex-start: cross-start margin edge of the item is placed on the cross-start line flex-end: cross-end margin edge of the item is placed on the cross-end line center: item
The align-items property is a sub-property of the Flexible Box Layout module. It defines the default behaviour for how flex items are laid out along the cross axis on the current line. You can think of it as the justify-content version for the cross-axis (perpendicular to the main-axis). The align-items property accepts 5 different values: flex-start: cross-start margin edge of the items
The align-content property is a sub-property of the Flexible Box Layout module. It helps aligning a flex container’s lines within it when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect when the flexbox has only a single line. The align-content property accepts 6 different values: flex-start: lines