css3中实现动画的方式 |css鼠标形状不能操作

1. transition

transition是CSS3中一个非常方便的动画实现方式。可以通过添加一些简单的CSS规则，实现元素在不同状态之间的过渡动画效果。

例如：
box {
width: 200px;
height: 200px;
background-color: pink;
transition: all 1s;
}
box:hover {
width: 300px;
height: 300px;
}

在上面的例子中，当鼠标移动到box元素上时，元素会从原本的200px x 200px的尺寸变成300px x 300px的尺寸，并在1秒钟内平滑过渡。

2. animation

animation是CSS3中最强大的动画实现方式。通过定义关键帧，使元素从一个状态动画到另一个状态。

例如：
box {
animation: mymove 1s ease infinite;
}
@keyframes mymove {
0% {left:0px;}
50% {left:200px;}
100% {left:0px;}
}

在上面的例子中，元素会从初始状态开始，每隔1秒钟，沿着left属性的值从0px变为200px，再变回0px。最终形成一个往返的动画效果。

3. transform

transform是CSS3中用来实现变换效果的属性。通过对元素的旋转、移动、缩放等变换，实现动画效果。

例如：
box {
transform: rotate(45deg);
}

在上面的例子中，元素将沿着中心点顺时针旋转45度。

以上三种方式是CSS3中常用的动画实现方式。通过它们，可以实现各种炫酷的动画效果。