css3动画特效常见

CSS3动画特效越来越受到开发者的关注，以下是一些常见的CSS3动画特效。

// 1. 放大动画.zoom-in {
    animation: zoomin 1s;
}
@keyframes zoomin {
from {
    transform: scale(0, 0);
}
to {
    transform: scale(1, 1);
}
}
// 2. 缩小动画.zoom-out {
    animation: zoomout 1s;
}
@keyframes zoomout {
from {
    transform: scale(1, 1);
}
to {
    transform: scale(0, 0);
}
}
// 3. 旋转动画.rotate {
    animation: rotate 1s infinite;
}
@keyframes rotate {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
// 4. 移动动画.move {
    animation: move 1s;
}
@keyframes move {
from {
    transform: translate(0, 0);
}
to {
    transform: translate(100px, 100px);
}
}
// 5. 抖动动画.shake {
    animation: shake 0.5s;
}
@keyframes shake {
from, to {
    transform: translate(0, 0);
}
10%, 30%, 50%, 70%, 90% {
    transform: translate(-10px, 0);
}
20%, 40%, 60%, 80% {
    transform: translate(10px, 0);
}
}
// 6. 淡入动画.fadein {
    animation: fadein 1s;
}
@keyframes fadein {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
// 7. 淡出动画.fadeout {
    animation: fadeout 1s;
}
@keyframes fadeout {
from {
    opacity: 1;
}
to {
    opacity: 0;
}
}
    

以上是一些常见的CSS3动画特效，可以根据需要进行调整和灵活运用，达到更好的视觉效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！