HTML过渡和动画

transition过渡

• transition过渡属性是CSS3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加“补间动画”
• 过渡从IE10开始兼容，移动端兼容良好
• 曾几何时，网页上的动画特效基本都是由JavaScript定时器实现的，现在逐步改为使用CSS3过渡
• 优点：动画更细腻，内存开销小
• transition属性有4个要素
  transition: width 1s linear 0s;
• 过渡要定义在元素的开始状态上，而不是结束状态上
• 所有数值类型的属性，都可以参与过渡，比如width、height、left、top、border-radius、opacity
• 背景颜色和文字颜色都可以被过渡
• 所有变形（包括2D和3D）都能被过渡
• 如果要所有属性都参与过渡，可以写all
  transition: all 1s linear 0s;

属性	意义
transition-property	哪些属性要过渡
transition-duration	动画时间
transition-timing-function	动画变化曲线（缓动效果）
transition-delay	延迟时间

• transition的第三个参数就是缓动参数，也是变化速度曲线
  transition: width 1s linear 0s;
• 网站https://cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数
  transition: width 1s cubic-bezier(0.1, 0.7, 1.0, 0.1) 0s;

动画的定义

• 可以使用@keyframes来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀

@keyframes r {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}

• 定义动画之后，就可以使用animation属性调用动画
  animation: r 1s linear 0s;

• 第五个参数就是动画的执行次数次数
  animation: r 1s linear 0s 3;

• 如果想永远执行可以写infinite
  animation: r 1s linear 0s infinite;

• 如果想让动画的第2、4、6……（偶数次）自动逆向执行，那么要加上alternate参数即可

• 如果想让动画停止在最后结束状态，那么要加上forwards
  animation: movelr 2s linear 0s infinite alternate;
animation: changeToCircle 1s linear 0s forwards;

@keyframes changeColor {
	0% {
		background-color: red ;
	}
	20% {
		background-color: yellow ;
	}
	40% {
		background-color: blue ;
	}
	60% {
		background-color: green;
	}
	80% {
		background-color: purple ;
	}
	100% {
		background-color: orange;
	}
}