学习HTML的第五天

一、过度动画

css样式发生变化时，默认直接变化，没有过渡的效果
1、transition-property 表示哪些样式可以参与过渡效果 默认为all 所有样式
2、transition-duration 过渡动画持续的时间
3、transition-timing-function 过渡动画的速率
4、ease 先快后慢 linear 匀速 ease-in先慢后快 ease-out先快后慢 ease-in-out(默认值)先加速后减速开始慢中间快结束慢
5、transition-delay 延迟执行过渡效果
6.width , height, color, left, right, border, transform 一般情况下，和元素外观有关的样式都能过渡,并不是所有的样式都能参与过渡
7、box-shadow 设置元素阴影，横向偏移量 纵向偏移量 模糊程度(值越大越模糊) 阴影大小 阴影颜色

二、关键帧动画

1、transition过渡效果
2、animation-duration 动画时间
3、animation-name 要执行的动画名称
4、animation-iteration-count 动画重复的次数 （infinite 无限循环）
5、animation-timing-function 动画速率
6、animation-direction 动画方向
7、编写rotate动画的过程

@keyframes rotate from{
transform: rotate(0deg) scale(1);
background-color: #008000;
}
to{
transform: rotate(360deg) scale(1.5);
background-color: #FF0000;
}
}`
8、animation 复合样式 动画名称 持续时间 速率 重复次数…
9.、both让标签停留在动画结束时的位置，默认回到原点 */
animation-fill-mode: both
10、将总共的动画时间按照百分比进行分配：

@keyframes move{
			0%{			
			transform: translate(0);
			}
			25%{
				transform: translate(100px, 0);
			}
			50%{
				transform: translate(100px, 100px);
			}
			75%{
				transform: translate(200px, 100px);
			}
			100%{
				transform: translate(200px, 200px);
			}
		}