css代码大全动画 |css 动画循环执行

/*1. 渐变动画（transition）*/
/*CSS代码*/
.trans {
transition:background-color 1s ease-out;
background-color:red;
}
.trans:hover {
background-color:yellow;
}
/*2. 旋转动画（transform rotate）*/
/*CSS代码*/
.rotate {
transition: transform 1s ease-in-out;
transform: rotate(0deg);
}
.rotate:hover {
transform: rotate(180deg);
}
/*3. 缩放动画（transform scale）*/
/*CSS代码*/
.scale {
transition:transform 1s ease-in-out;
transform: scale(1);
}
.scale:hover {
transform: scale(2);
}
/*4. 平移动画（transform translate）*/
/*CSS代码*/
.translate {
transition: transform 1s ease-in-out;
transform: translateX(0px);
}
.translate:hover {
transform: translateX(100px);
}
/*5. 动画序列（animation sequence）*/
/*CSS代码*/
.animation {
animation:move 2s ease-in-out;
}
@keyframes move {
0% {
transform:translateX(0px);
}
50% {
transform:translateX(100px);
}
100% {
transform:translateX(0px);
}
}

以上就是CSS代码大全中常用的动画效果实现方法。值得一提的是，除了以上动画效果，CSS3还支持更多多样化的动画效果，例如倾斜动画（skew）、透明度动画（opacity）等。在Web前端开发中，合理运用各种动画效果不仅可以提高网页的用户体验和交互性，同时也可以更好地展示产品或服务。