CSS-关键帧动画

animation和transition的区别
相同点：都是随时间改变元素的属性值
不同点：transition需要触发一个时间（hover或者click事件）才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也是可以显示的随时间变化来改变元素的css属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值

animation:mymove 20s ease-id-out 2s infinite alternate;
mymove  动画名称 
20s  动画持续时间
ease-in-out   动画过渡类型
2s   动画延迟的时间
infinite  动画的循环次数
 alternate  动画在循环中是否反向运动

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: mymove 2s linear;
        }

        @keyframes mymove {
            from {
                width: 100px;
                height: 100px;
                background-color: red;
            }

            to {
                width: 200px;
                height: 300px;
                background-color: rgb(0, 255, 115);
            }
        }

        @keyframes mymove {
            10%