Long description

There is a solid colored square box labeled begin state that is left aligned and solid colored rhombus labeled end state that is right aligned. There is a dotted line starting from square box to the rhombus that has paragraphs above and below it.Paragraph 1 above the dotted line reads A transition alters one or more CSS properties across time. Paragraph 2 below the dotted line reads It has a begin state and then it transitions to the end state dot It also needs an explicit trigger open bracket such as hovering close bracket.There is another solid colored square box labeled begin state that is left aligned and solid colored rhombus labeled end state that is right aligned. There is a zigzag dotted line with small bullets appearing in crest and turfs, from square box to the rhombus that has 2 paragraphs. Paragraph 4 above the zigzag line line that reads An animation also alters one or more C S S properties across time. Paragraph 5 below zigzag line that reads But you can define key frames that give you more control over the intermediate steps between the begin and end state. There is a dotted line starting from solid rhombus on the right to solid square box on the left. Paragraph 5 below the dotted line reads No trigger is needed colon an animation begins once it is defined dot As well, you can loop an animation.