<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<!-- transition:动画过渡效果属性
功能:使css的属性值在一定的时间内平滑的过渡。这种效果可以在鼠标
点击、划过、获取焦点或对元素任何改变中触发,并圆滑的以动画效果改变css属性值。
可定义的属性有:
transition-property:设置那些属性进行过渡,all:所有属性
transition-duration:完成过渡动画效果的时间,默认是0
transition-timing-function:设置动画的缓动效果,默认是ease(逐渐变慢)。
(其他常用值:ease-in,加速;ease-out,减速;ease-in-out,加速然后减速)
transition-delay:设置动画开始的延迟时间,默认是0
示例:
使用transition,实现过渡动画。一个红色的正方形,当鼠标移入该区域后,红色正方形放大一倍,并且颜色变为灰色。鼠标移开,还原到初始状态。 -->
<style>
.box{
width: 100px;
height: 100px;
margin:50px auto;
background-color: #f00;
/* 为离开的动作也添加过渡效果 */
transition: all 1s ease-in 1s;
}
.box:hover{
height: 200px;
width: 200px;
border-radius: 50%;
background-color: #666;
/* transition-property:width,height,border-radius;
transition-duration: 1s;
transition-timing-function:ease-in;
transition-delay:1s; */
transition: all 1s ease-in 1s;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
Document