[分享]css3所有动画

CSS3 动画

  /* 使用 CSS3 实现动画 */
        
        /* 改变元素的位置 */
        .move {
            animation: move 2s linear;
        }
        
        @keyframes move {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(100px);
            }
        }
        
        /* 改变元素的大小 */
        .scale {
            animation: scale 2s ease-in-out alternate;
        }
        
        @keyframes scale {
            from {
                transform: scale(1);
            }
            to {
                transform: scale(1.5);
            }
        }
        
        /* 改变元素的透明度 */
        .opacity {
            animation: opacity 2s ease-in-out infinite;
        }
        
        @keyframes opacity {
            from {
                opacity: 1;
            }
            to {
                opacity: 0.5;
            }
        }
        
        /* 旋转元素 */
        .rotate {
            animation: rotate 2s linear;
        }
        
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        /* 剪裁元素 */
        .clip {
            animation: clip 2s ease-in-out;
            animation-fill-mode: forwards;
        }
        
        @keyframes clip {
            from {
                clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            }
            to {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
        }
        
        /* 颜色变化 */
        .color {
            animation: color 2s ease-in-out alternate infinite;
        }
        
        @keyframes color {
            from {
                color: #000;
            }
            to {
                color: #fff;
            }
        }
        
        /* 运动轨迹 */
        .path {
            animation: path 2s ease-in-out forwards;
        }
        
        @keyframes path {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(100px) rotate(45deg);
            }
        } 

在开发过程中，使用CSS3 动画可以让页面更加生动有趣，让用户的体验更加舒适。以上列出的动画只是众多动画中的一部分，开发者可以根据实际需求进行选择。