这四种方法利用css3实现过渡动画效果

　　CSS3中过渡(Transition)是实现动画效果的一种方式，它可以控制元素的属性在一定的时间段内平滑地过渡到指定的值，从而实现一些动态的效果。下面是一些常用的CSS3过渡动画效果：

　　1.改变背景颜色

/* 定义元素的背景颜色 */
div {
background-color: #FF0000;
transition: background-color 1s ease;
}

/* 当鼠标悬停在元素上时，背景颜色过渡到蓝色 */
div:hover {
background-color: #0000FF;
}

　　2.缩放元素

/* 定义元素的缩放属性 */
div {
transform: scale(1);
transition: transform 1s ease;
}

/* 当鼠标悬停在元素上时，元素缩放为原来的两倍 */
div:hover {
transform: scale(2);
}

　　3.淡入淡出元素

/* 定义元素的不透明度 */
div {
opacity: 1;
transition: opacity 1s ease;
}

/* 当鼠标悬停在元素上时，元素淡出 */
div:hover {
opacity: 0;
}

　　4.移动元素

/* 定义元素的位置 */
div {
position: relative;
left: 0px;
transition: left 1s ease;
}

/* 当鼠标悬停在元素上时，元素向右移动100像素 */
div:hover {
left: 100px;
}

　　在这些例子中，transition属性指定了要过渡的CSS属性、过渡的时间和过渡的动画类型。当触发过渡时(例如，鼠标悬停在元素上)，被选元素会平滑地从当前状态过渡到目标状态，创建动态效果。您可以根据需要调整这些属性，以创建不同的过渡效果。