css笔记动画

动画的基本使用

1. 先定义动画
2. 使用动画

//用keyframes定义动画
//0%动画开始   100%动画的完成
//1. 定义动画
@keyframes 动画名称 {
     0% {
     		width:100px;
     }
     100% {
     		width:200px;
     }
 }
 @keyframes move {
 		from {
 			transform: translate(0,0);
 		}
 		to {
 			transform:translate(1000px,0);
 		}
 }
 @keyframes move {
 	0% {
 		transform:translate(0,0);
 	}
 	25% {
 		transform: translate(1000px,0);
 	}
 	50% {
 		transform:translate(1000px,500px);
 	}
 	75% {
 		transform: translate(0,500px);
 	}
 	100% {
 		transform: translate(0,0);
 	}
 }
 //2.调用动画
 animation-name: 动画名称;
 animation-duration: 持续时间;
 //运动曲线
 animation-timing-function: ease;
//重复次数
animation-iteration-count: infinite;循环播放
//是否反方向播放

动画常用属性

动画简写

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态；
属性里不包括animation-play-state：puased；经常和鼠标经过等其他配合使用