CSS3-animation属性和perspective

@keyframes用来定义一个动画的具体状态内容，而animation属性用来定义一个元素执行某个动画时的相关动画设定：

• 指定元素用什么动画？ animation-name
• 动画的持续时间是多少？ animation-duration
• 浏览器用什么样的时间轴函数来执行该动画？ animation-timing-function
• 是否需要延时执行该动画？ animation-delay
• 动画循环执行的次数是什么？ animation-iteration-count
• 动画执行的方向是什么？ animation-direction
• 动画填充模式是什么？ animation-fill-mode
• 动画执行状态是运行还是暂停？ animation-play-state

perspective

css3中的perspective代表牌观察者与元素的距离，也就是3D效果的强度。perspective数值与3D效果成反比，数值越大，元素3D效果越不明显。

image.png