css3动画小总结

对于css3不得不提的就是css3的动画了

大致分为3大块

transform（变化），transition（过度），animate（动画）

transform变化主要是位置的移动translate(向右移动距离，像下移动距离)，scale缩放，rotate旋转顺时针

2d变化如下：

transform: translate(100px,100px) scale(0.8) rotate(45deg);

3d变化：

transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);

transition过度主要是实现一些从开始到最终状态的状态的过度（有原路返回的效果，不会因为去掉样式后直接立即回到之前的状态）

代码如下

.box{
    height: 100px;
    width: 100px;
    border: 1px solid black;
    transition: width 3s, height 3s, transform 3s;
}

意思是宽度、高度、transform变化的变化的过程时间为3秒。具体的样式我这里是通过hover状态加上去的(也可以定义样式名然后通过js动态触发来添加)

.box:hover{
    width: 300px;
    transform: translate(100px,100px) scale(0.5) rotate(45deg);
}

animate动画这个要结合@keyframes来实现

先定义好@keyframes

@keyframes move {
    from{
        background: white;
    }
    to{
        background: green;
    }
}
@keyframes move1 {
    0%{
        background: red;
    }
    25%{
        background: green;
    }
    50%{
        background: yellow;
    }
    75%{
        background: black;
    }
    100%{
        background: red;
    }
}

通过animate来调用

animation: move1 3s infinite;//这里的意思是引用move1这个动画，过程是3秒，infinite是让这个无限循环下去

animation可以直接添加也可以写在样式中然后引入