animation与transition

先说说transition

transition有四个基本概念，只要记牢这几个概念，以后碰到transition就不会犯晕了

transition: [属性名] [持续时间] [速度曲线] [延迟时间];

//高度属性的值改变时，延迟 0.5 秒后以 ease 曲线进行过渡，持续2秒：
transition: height 2s ease .5s;

//监听所有属性
transition: all 2s ease .5s;

transform

transform: [转换函数];
transform接受一个转换函数，每个转换函数都会有不同的效果

//当前元素往上移动 10 像素，往右移动 10 像素
transform: translate(-10px, 10px)

指定多个转换效果

//向右下角移动 10 像素并顺时针旋转10度
transform: translate(10px, 10px) rotate(10deg)

transition + transform

//这种写法可以给transform指定一个过渡
transition: transform 2s ease .5s;

//当鼠标移动到div上，div旋转180度
.child {
	width: 100px;
	height: 100px;
	background-color: blue;
	transition: all 0.3s ease-in-out;
}

.child:hover {
	transform: rotate(180deg);
}

animation

<div class="animation">
	动画
</div>
<div class="gradually">
	渐变
</div>

.animation{
	width: 100px;
	height: 100px;
	animation:myfirst 5s;
}
@keyframes myfirst{
	from{background:red}
	to{background:green}
}
.gradually{
	width: 100px;
	height: 100px;
	animation: mysecond 5s;
}
@keyframes mysecond{
	10%{background:red};
	25%{background:green};
	75%{background:red};
	100%{background: pink};
}