css三张动画怎么写 |css cols rows

/* 淡入淡出动画 */
.fade {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.fade:hover {
opacity: 1;
}
/* 位移动画 */
.translate {
transition: transform 0.5s ease-in-out;
transform: translate3d(0, 0, 0);
}
.translate:hover {
transform: translate3d(10px, 10px, 0);
}
/* 旋转动画 */
.rotate {
transition: transform 0.5s ease-in-out;
}
.rotate:hover {
transform: rotate(360deg);
}

以上代码中，大家使用了CSS的transition过渡属性，它能够帮助大家实现CSS动画效果。对于淡入淡出动画，大家使用opacity属性设置元素的透明度，然后通过transition过渡属性设置动画时间和缓动函数。当鼠标悬停在元素上时，opacity属性值变为1，达到淡入效果。

对于位移动画，大家使用CSS3的transform属性实现元素的平移和动画过渡。同样地，在元素上添加:hover伪类选择器，当鼠标悬停在元素上时，元素进行平移，路径为(x,y,z)。

最后，大家介绍了一个简单的旋转动画实现方式。同样地，大家使用transform的rotate属性来控制元素的旋转角度，把元素逆时针旋转了360度，达到了无限循环的旋转效果。

总之，利用CSS动画实现丰富的交互效果对于任何一款网站都是十分重要的，希望以上的例子能给你带来一些帮助！