The appearance property is used to display an element using a platform-native styling based on the users’ operating system’s theme. .thing { -webkit-appearance: value; -moz-appearance: value; appearance: value; } This is used for one of two reasons: To apply platform specific styling to an element that doesn’t have it by default To remove platform specific styling to
A
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:
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