用css实现动画

在逆战班学习了三周，学到的东西挺多，觉得动画很有趣且应用得很广泛，所以现在就如何用CSS实现动画进行详解。通过学习了解到用CSS实现动画有两种方式，分别是过渡动画（transition）和animation动画。
一、过渡动画（transition）
Transition属性是一个简写属性，用于设置四个过渡属性，即

1. transition-property
   描述：规定设置过渡效果的 CSS 属性的名称。
   默认值： all
   可填值：none、all、property
2. transition-duration
   描述：规定完成过渡效果需要多少秒或毫秒。
   默认值： 0
   可填值：time（根据需要）
3. transition-timing-function
   描述：规定速度效果的速度曲线。
   默认值： ease
   可填值：linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)
4. transition-delay
   描述：定义过渡效果何时开始。
   默认值：0
   可填值：time（根据需要）注：负值表示延迟多长时间进行过渡，例-2s。
   **语法：**transition: property duration timing-function delay;

二、antimation动画
animation属性是一个简写属性，用于设置六个动画属性，即<