Css学习_5过度及动画

Css学习_5过度及动画

过度

单个属性的过度

// 单个属性效果的过度动画
<div>测试</title>
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	transition:width 2s;
}
div:hover
{
	width:300px;
}
</style>

多个属性的过度

// 多个属性的过度动画(宽、高变化和旋转)
<div>测试</title>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s, height 2s, transform 2s;
}
div:hover {
    width: 200px;
    height: 200px;
    transform: rotate(180deg);
}
</style>

动画

// 单个动画执行
div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
}

@keyframes myfirst
{
	from {background:red;}
	to {background:yellow;}
}


// 多动画，控制动画各部分时长
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
}

@keyframes myfirst
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}
</style>

transation和animation区别：

• Transition 强调过渡：

  • 需要触发一个事件，比如鼠标移上去、焦点、点击。

• Animation 强调流程与控制：

  • 不需要触发任何事件也可随时间变化达到一种动画效果；

• animation可以设定循环次数。

• animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。

• animation与js的交互不是很紧密。tranistion和js的结合更强大。