简单认识css3的过渡和动画！

过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

1.指定要添加效果的CSS属性
2.指定效果的持续时间。

下面简单介绍一下transition的用法：

transition: css过渡样式 过渡时间 运动曲线 开始时间;

例子：

div
{
    transition: width 2s;
}
应用于宽度属性的过渡效果，时长为 2 秒：

css过渡样式是指元素过渡的样式例如：width，font-size，…
过渡时间是指在规定时间内完成过渡动作。
运动曲线包括：

linear 匀速。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in 规定以慢速开始的过渡效果。
ease-out 规定以慢速结束的过渡效果。
ease-in-out 规定以慢速开始和结束的过渡效果。

开始时间指定秒或毫秒数之前要等待切换效果开始。

动画

要创建 CSS3 动画，你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。 @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

例子：
用关键词 “from” 和 “to”，等同于 0% 和 100%

@keyframes move {
			from {
				width: 200px;
				background-color: red;
			}

			to {
				width: 500px;
				height: 500px;
				background-color: orange;
			}
		}



 @keyframes move {
    0% {
      background: red;
    }

    100% {
      background: green;
    }
  }
 

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称， 规定动画的时长

例子：

div {
			animation: move 3s;
		}